Adjusting Klaviyo Popup and Teaser Visibility on Mobile Devices

Question

I'm encountering an issue with the Klaviyo popup and teaser functionality on my website. On desktop devices, everything works as expected: the popup appears after a set delay, and the teaser is visible before and after the popup is closed. However, on mobile devices, I would like to adjust the behavior. Specifically, I do not want the popup to appear automatically on mobile. Instead, I only want the teaser to be visible. The popup should only appear if a user interacts with the teaser.

Currently, the teaser disappears on mobile as if the popup is going to appear (due to a Klaviyo setting to display the form after 7 seconds). Despite trying various CSS and JavaScript modifications to prevent this and to keep the teaser visible without triggering the popup automatically, I haven't been successful.

Could you provide guidance or a solution on how to prevent the popup from auto-appearing on mobile devices while keeping the teaser visible and interactive, allowing the popup to appear only upon tapping the teaser?

JessFosnough · Accepted Answer

Hi @Simon-Cigoire,I’m not sure if this is the best solution, but it is a work-around. Try creating 2 different forms, one for desktop and one for mobile - you can have both forms submit to the same list. On the mobile teaser, try selecting “Show teaser before form is displayed” or “Show teaser before displaying form and after form is closed”, depending on what you prefer.You might also need to set the form to only open on a custom trigger. Unfortunately, I don’t know how to do that, but here is an article that might help:How to trigger a sign up form to appear when a button is clickedMaybe the custom trigger can be the teaser itself - ??Hope this helps!

Simon-Cigoire · Answer

Thanks a lot! Indeed, I think it is the best way to do it!

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded