Hi everyone,
I am trying to integrate the Freshchat web widget into a custom HTML5 application for bug reporting and user feedback, but I am running into a CSS/touch-event conflict on mobile viewports.
I recently integrated the snippet into hang 5, which is a daily word puzzle web app. The game relies entirely on a custom on-screen keyboard built with CSS grid at the bottom of the screen.
The Freshchat bubble sits in the bottom right corner. While the visual bubble itself is small, the invisible iframe container (or the surrounding padding) seems to overlap the "Enter" and "Backspace" keys on my game's keyboard when viewed on iOS Safari and mobile Chrome. This causes players to accidentally open the chat widget when they are just trying to submit a word.
Has anyone found a clean way to override the widget's default bounding box or z-index so it strictly wraps the bubble without an invisible overlay? Or is there a custom initialization parameter to add more bottom/right margin specifically for mobile devices so I can push it completely out of the way of the keyboard?
Any CSS workarounds would be hugely appreciated!
