Hi @KTMEM ! great question and appreciate you writing it out so clearly. I will admit that I am not a super technical expert, but I DO have access to their documentation, so here is what I gathered...
First, this is a known pain point for React SPA setups, so you're not alone.
Here's what seems to be happening: Klaviyo's signup form suppression (including the "don't show to existing profiles" setting and the 7-day frequency cap) relies on a browser cookie called __kla_id. If your React SPA isn't persisting cookies reliably between sessions, Klaviyo can't recognize returning visitors, so it treats them as new each time and shows the popup again.
A few things worth checking first:
- Confirm Klaviyo.js is loading correctly on every page/view in the SPA. Since React SPAs don't do full page reloads, there can be timing issues with when tracking initializes.
- Check whether the __kla_id cookie is actually being written. Open DevTools > Application > Cookies and look for it after visiting the site. If it's missing or being cleared, that's your culprit.
- Rule out consent managers or ad blockers. These can block Klaviyo.js from running entirely, which prevents any cookie-based suppression from working.
- Make sure you only have one Klaviyo snippet on the site. Multiple instances can cause unpredictable form behavior.
On your specific questions:
Can Klaviyo use localStorage instead of cookies for suppression? Not natively. Suppression is cookie-based and there's no documented setting to switch this to localStorage.
Is there a React SPA-specific workaround? The best documented option is switching to a custom trigger. Klaviyo supports custom triggers for popup and flyout forms, which lets your developer control exactly when the form fires in the SPA lifecycle rather than relying on scroll depth.
To set this up:
- In your form's Targeting and Behavior settings, change the display timing to "Only show on custom trigger"
- Publish the form
- Have your developer call window._klOnsite.push(['openForm', 'YOUR_FORM_ID']) at the right moment in the app
Docs here: https://developers.klaviyo.com/en/docs/how_to_custom_trigger_a_popup_or_flyout_form
One important note: custom trigger controls when the form opens, but it doesn't replace cookie-based suppression entirely. So this works best alongside fixing the underlying cookie persistence issue, rather than as a standalone fix.
If you've confirmed Klaviyo.js is set up correctly and cookies still aren't persisting, it's worth reaching out to Klaviyo Support directly with a live page URL and confirmation of whether __kla_id appears in browser storage. They can dig into the specifics from there.
