Improve tawk button position

[moshfeu]

Tawk button is overlapping the logout button in the backoffice on mobile

Currently tawk's button is in the most top layer using z-index !important.
Seems like there is no way to configure this. The only way is to hide it and use tawk API to show / hide the chat.

https://help.tawk.to/article/using-a-text-link-or-button

UI-wise, we can use their image for the show / hide button so it basically will look the same.

[OlushesiToheeb]

HI @moshfeu I'll love to solve this issue

[moshfeu]

That will be great!
If you have a better idea than what I suggested above, I'd be happy to discuss.

[OlushesiToheeb]

@moshfeu where will i find tawk button?

[moshfeu]

We only includes their script

find-a-mentor/src/utils/tawk.ts

Lines 15 to 31 in 3d12f6f

	function init() {
	if (process.env.NODE_ENV === 'development') {
	return;
	}
	(function() {
	const s1 = document.createElement('script');
	s1.async = true;
	s1.src = 'https://embed.tawk.to/60a117b2185beb22b30dae86/1f5qk953t';
	s1.setAttribute('crossorigin', '*');
	document.head.prepend(s1);
	})();
	window.Tawk_API = window.Tawk_API || {};
	window.Tawk_API.onLoad = function() {
	window.Tawk_API.addTags(['Mentor', 'User']);
	};
	}

The script is creating and placing the button.

[KravMaguy]

hey I had same question as @OlushesiToheeb

wjat o i discovered was that if you comment out the return right abouve the iiffe you will see it. its inside the init funciton at the top becuase you are probably running it like me yarn dev.

[moshfeu]

Right.
Since we don't have a testing widget for now and to avoid seeing local users in production, we include the widget only on production.
@KravMaguy you are absolutely right.
@OlushesiToheeb are you still working on it or should I assign it to @KravMaguy (if he wants of course) ?

[KravMaguy]

@moshfeu yeah I will take this if @OlushesiToheeb does not reply, problem is though even if you do will still crash w/ reference error. I believe this will be fixed upon completing #899 although now you have this problem.. it needs moshe's advice how to proceed its above my current knowledge level, pretty new to typescript and zero experience w/ next.js. I think it is problem w next.js because I tested thier react component last night in normal cra project that doesnt use next and it worked as expected.

[KravMaguy]

Right. Since we don't have a testing widget for now and to avoid seeing local users in production, we include the widget only on production. @KravMaguy you are absolutely right. @OlushesiToheeb are you still working on it or should I assign it to @KravMaguy (if he wants of course) ?

"we don't have a testing widget for now"
you mean because no one wrote any tests for it yet?

"avoid seeing local users in production"
you mean to avoid recieving messages in tawk from people working on the project? tawk react we set those keys as env variables you wont have that problem. Maybe I dont understand. what is "local users"?

Ive solved for this issue, please accept my pull request.

[moshfeu]

"we don't have a testing widget for now"
you mean because no one wrote any tests for it yet?

I meant widget for testing locally. It's related to the second point that we don't want to receive messages from developers that working locally. Yes, if the keys would be stores in the env file it would solve the issue.

[KravMaguy]

ive completed this yes?
#927