Answered

Chat close Icon ("x") is overlapping on mobile devices (only Android)

  • 17 January 2022
  • 9 replies
  • 176 views

Userlevel 1

Hey all,

we have a problem integrating a typeform as chat into our website. For Desktop, iOS mobile everything works smooth and fine (Chrome, Safari etc..) but when using Android (mobile, Chrome) there is an issue with the “x” closing-icon in the top corner. When loading the page with embedded typeform as chat, the “x” closing-icon shows directly in the upper right corner (chat form is closed correctly). It is placed in a div which is completely overlapping all other html elements, so the user is not able to use the website until he/she clicks the little closing-icon (which is very hard to see) or he/she opens and closes the chat.

Hope, there is help out there ;) …

Thanks in advance!

Best regards

cd_schade

icon

Best answer by mathio 17 January 2022, 16:15

View original

9 replies

Userlevel 7
Badge +5

Hello @cd_schade can you please share the embed code you are using? And also the website where you embed (if you can)?

PS: I just tested chat popover embed code (copied from typeform share page) and it worked on an Android device just fine. Maybe you have a conflicting CSS in your website that affects the close button?

Userlevel 1

Hi @mathio - of course!

<div data-tf-popover="jCas2KHm" data-tf-button-color="#CBFF2F" data-tf-tooltip="Wähle Deine Krankenkasse aus" data-tf-chat data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>

The Website is: www.cyberpraevention.de - we are currently not using the form, because of the described issue. If you want me to activate it temporary, let me know.

Thanks in advance!

Userlevel 7
Badge +5

Thank you.

I have placed your embed code into an empty page and it works fine: 
https://shimmering-square-foxtrot.glitch.me/

Something in your website is most likely overriding typeform CSS. If you want me to have a look please activate the form on your page (eg. on a non-public page not to affect your customer experience).

Userlevel 1

please have a look here (with Android mobile device): 

 

https://www.cyberpraevention.de/kurs/diabetespraevention/

Userlevel 7
Badge +5

This seems to be somehow connected to the cookie consent widget. When I open the page for the first time (and cookie consent popup is displayed) I experience the issue you described. Otherwise it seems to work fine (even on Android). 

Is it a 3rd party widget? Do you know the name of this widget? It will further help me with identifying the issue.

Userlevel 1

@mathio - you were right! The cookie consent plugin somehow blocked the script. We were able to reproduce it in Desktop (with mobile simulation). We’ve added data-cookieconsent="ignore" to the script, so it gets loaded every time. No it is working as expected. This means the cookie consent worked only in mobile.

For others having the same issus: the cookie consent plugin we are using is: https://www.cookiebot.com/

Thank you very much @mathio! You saved my day!

Userlevel 7
Badge +5

I think i have seen this behavior before 🤔 I will do some research if there is something we can do on our part to facilitate this in future.

Userlevel 7
Badge +5

Happy you got this working, @cd_schade!

Btw, your form looks great on your website. Can you tell us a little bit more about why do you need to use Typeform? Is this one the only form you've built?

Have a nice day! :blush:

Userlevel 1

Hi Gabi,

thank you! 🙂 ..

We have multiple online health/prevention classes which we are providing for different public health insurances. We are using the form to route the user to the right landing page.

I use typeform for many other cases - as a chatbot/routing tool but also as questionnaire/form to collect data in our application (via webhook). I love it!

Kind regards.

cd_schade

Reply