find-a-mentor icon indicating copy to clipboard operation
find-a-mentor copied to clipboard

Improve tawk button position

Open moshfeu opened this issue 4 years ago • 10 comments

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

Screen Shot 2021-10-14 at 17 09 10

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.

moshfeu avatar Jul 01 '21 19:07 moshfeu

HI @moshfeu I'll love to solve this issue

OlushesiToheeb avatar Oct 13 '21 07:10 OlushesiToheeb

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

moshfeu avatar Oct 13 '21 08:10 moshfeu

@moshfeu where will i find tawk button?

OlushesiToheeb avatar Oct 13 '21 23:10 OlushesiToheeb

We only includes their script

https://github.com/Coding-Coach/find-a-mentor/blob/3d12f6f88e6d9d6941574b71fe75da17704b2386/src/utils/tawk.ts#L15-L31

The script is creating and placing the button.

moshfeu avatar Oct 14 '21 14:10 moshfeu

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.

KravMaguy avatar May 21 '22 01:05 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) ?

moshfeu avatar May 21 '22 20:05 moshfeu

@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 avatar May 21 '22 20:05 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.

KravMaguy avatar May 23 '22 09:05 KravMaguy

"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.

moshfeu avatar May 23 '22 20:05 moshfeu

ive completed this yes? https://github.com/Coding-Coach/find-a-mentor/pull/927

KravMaguy avatar May 27 '22 15:05 KravMaguy