Help - Is it possible to remove the animation for a Form's "Teaser" on pageload?

Question

I have two problems. -Problem 1 (Major issue): I am using a teaser on my form (popup), and on page load the teaser appears overflowing at the bottom of the screen (like half the teaser bubble is visible, cropped off since its at the bottom of screen… and then it slides up with an animation after a few seconds. This looks broken! On initial page load it looks broken/half cropped on every single page navigation. The animation  looks tacky when it occurs because it feels broken from the start. Is there a way to remove the animation so the teaser just loads in the place it is going to appear? Hopefully there is a way to disable the animation. At this point, the animation isn’t nice touch. It’s just a blocker. -Problem 2: Please tell me there’s a way to use Teaser > Style : “Rectangle” and make it so that it isn’t full width on mobile. It takes up so much screen size for no reason and look so bad. On Attentive I have more control styling the rectangle and I am hoping I can set the mobile width of the teaser to 130px.  Alternatively, being able to reduce the border radius on Circle style would be nice. I know the docs say Klaviyo supposedly “optimized” the mobile width for Rectangle, but it’s obviously a lie and making it a forced restriction for no good reason. If “Circle” can get away with being like 100px width, then a Rectangle teaser should be able to, too.   - If anyone can help it would be appreciated. Especially removing the teaser animation on load, because if I can’t, the initial position on pageload (which looks broken) is unacceptable from a customer experience POV,  and I’ll have to switch over to Attentive 100%. I really would prefer not to have to switch. Please help.

ArpitBanjara · Answer

hey ​@nico-mundo- Welcome to the klaviyo community,for your problem 1 -As far as I know there's no setting in the form editor for either of these, so you'd be looking at custom CSS on your site. The teaser renders in your page's regular DOM rather than an iframe, so you can target its wrapper element and disable the animation and transition properties (you'll likely need !important since Klaviyo applies styles inline). That said, the half-cropped starting position doesn't sound normal to me. The teaser should sit fully offscreen until it slides in, so if part of it is visible beforehand, my guess is something in your theme's CSS is conflicting with Klaviyo's positioning. Hard to say for sure without seeing it, but fixing that conflict alone might solve most of this issue.for your second problem :On the rectangle width, you're not missing a setting. Klaviyo forces rectangle teasers full-width on mobile and their docs frame it as an optimization. The same site-CSS approach should work here: target the teaser inside a mobile media query and set the width you want. One thing to remember is that Klaviyo's class names are auto-generated and can change when they update their forms library, so it's worth re-checking after updates. if you are not a developer yourself, both fixes together are a quick job for your developer who manages your theme.I hope this helpsCheersArpit

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials