Implement Embed Klaviyo forms in SPA apps like GatsbyJS / ReactJS.

Also pinging in that we have this issue. More and more stores are going PWA. But it seems like this is not a priority at Klaviyo at all, since it has been pointed out for years. 

Hi,
I had the same difficulties to integrate a Klaviyo form in my NextJs app.

It turns out the main Klaviyo object can be used to trigger the rendering of the form.

You can shove that inside a UseEffect and move on.

const ComponentA: NextPage = () => {
  useEffect(() => {
    window._klOnsite = window._klOnsite || [];
    window._klOnsite.push(['openForm', 'FORM_ID']);
  }, []);
  return (
    <>
      <main>
        <div className="klaviyo-form-VD6mYY"></div>
      </main>
    </>
  );
};

​@monlouisj did that actually work for you? we tried this and it didn’t do anything, in Klaviyo’s docs it says that push function doesn’t work with embedded forms.

Hi ​@engine ,
yes I confirm

Posting a less invasive alternative to the iframe workaround in case it's useful.

The fundamental issue is that Klaviyo's onsite script scans the DOM once on initial load and 
doesn't re-scan when an SPA mounts a new form div on navigation. But their internal render is 
re-triggered on pathname changes — driven by a window-level CustomEvent named 
onsite-event-publish, with payload {type: "PAGE_CHANGE", payload: {currentPageUrl: "..."}}. 
Klaviyo's listener fires their render flow whenever the pathname in currentPageUrl differs from
the one they've stored.

The fix: dispatch this event yourself with a unique fake URL whenever the form has come up 
empty. Klaviyo runs its render path, this time finding the current form div. Core dispatch:

window.dispatchEvent(
    new CustomEvent("onsite-event-publish", {
        detail: {
            type: "PAGE_CHANGE",
            payload: {
                currentPageUrl: `${location.origin}/__klaviyo_retry_${attemptNumber}`
            }
        }
    })
);

Packaged as a drop-in React component (~50 lines, no deps beyond React):

https://github.com/emilrais/klaviyo-spa-fix

<KlaviyoForm id="YOUR_FORM_ID">
    <h4>Subscribe!</h4>
</KlaviyoForm>

The component renders <div className="klaviyo-form-<id>" /> (the standard Klaviyo target) and a 
MutationObserver watches its content. The children prop renders only when the form has actually 
populated, so failed renders gracefully degrade to nothing instead of leaving orphaned chrome on
the page. Up to 4 retries handle the (rare) cases where the first synthetic PAGE_CHANGE doesn't
land either.