Hi everyone,
My team relies heavily on Calendly for booking our internal syncs, so I am very familiar with the standard routing forms. However, I am currently running into a frustrating frontend issue when trying to embed the booking widget on a custom web app.
I recently built a daily HTML5 logic puzzle for my team and our users to take a quick mental break. You can see the mobile layout and play hang five here to understand the UI structure.
My goal is to place a Calendly "Inline Embed" directly beneath the main game container so players can easily book a quick feedback call with me. On desktop, the embed works flawlessly. But on mobile viewports (specifically iOS Safari), the invisible container or padding of the Calendly iframe seems to stretch upward and overlap the bottom of my game's CSS grid keyboard. This causes the iframe to "steal" the touch events, meaning players cannot tap the bottom row of letters.
-
Has anyone found a clean CSS wrapper to strictly lock the inline embed's maximum height on mobile to prevent it from overlapping other DOM elements?
-
For those with mobile-heavy applications, is it generally safer to just use the Popup Widget instead of the Inline Embed to avoid these z-index conflicts entirely?
Thanks in advance for any advice!
