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

@cbarely - has anything changed on this?

We have a React Ionic hybrid mobile app with Klaviyo installed.  We don’t have any tracking issues (that we are aware of - and the data is similair to what we get from GA, Facebook, etc.) but we have issues with Klaviyo Forms working properly (especially when bundled inside of iOS / Android - we can’t get anything to fire).

Hi team @ Klaviyo,

Any updates on the roadmap of this feature. We’re using this in a React SPA also.

Any chance that the JS SDK for embedding could be open-sourced, so that the community could make the necessary changes? 

Hi everyone!

There aren’t any new updates yet, but I can assure you that the Product Request has been made including all of your feedback, and the team is considering the next best action carefully.

@jasonnuttech while there aren’t any plans for open-sourcing the JS SDK, that is an interesting idea - I will definitely reach out to see if there is any possibility of this in the future.

Best,

- Brian

I had the same problem, but I used nextjs

hey @cbarley and others,

Just chiming in here to also request that the integration be made friendly to SPAs and react in general. We use NextJs but it doesn’t seem super relevant in this case.

It is not currently possible for our clients to use the forms they design in klaviyo on our frontend with reliability, nor is it really scalable to ask them to reimplement all forms by creating a duplicate and then submitting it via the API. That method is fine for simple tasks like an email list signup, but becomes really cumbersome and frustrating for more complicated forms, especially when klaviyo provides such good tools for creating those forms in the first place.

Something I have seen from other integrations is making a function that reinitializes the widget script available through the window object. That way, our app can handle listening for route changes. If window.Klaviyo was created on the initial load (something that is already being done), we can just call the function as our app requires it from window.klaviyo.reinitFunction()

thanks for your help, we hope to see this soon!

Hi,

We’re experiencing the same issue in our next.js / react setup. 
The sign-up forms will only load on hard page refreshes, but not when using client side routing.

I’ve seen the suggested solution from @blinkdev in many other integrations, which works great.
A great example can be found in the documentation of Trustpilot.

I made a very ugly workaround for nextjs. But it works… 🙃😃

The idea is to display the form on a page through an iframe (😂) which will reload every time, even on client side navigation.
Since the iframe doesnt know its containing page’s height, we try setting it using an interval.

1. Create a client side component (for nextjs app dir)

'use client'

import React from 'react'
import { useWindowSize } from 'react-use'

export function KlaviyoForm({ id }: { id: string }) {
  const ref = React.useRef<HTMLIFrameElement>(null)
  const [height, setHeight] = React.useState(0)
  const window = useWindowSize()

  const onLoad = () => {
    let lastH = 0
    let tries = 0
    const maxTries = 42 // try for 420ms then give up
    const interval = setInterval(() => {
      tries++
      if (maxTries < tries) {
        clearInterval(interval)
        console.warn('Could not initate iframe height for klaviyo form.')
      }
      const h = ref.current!.contentWindow?.document.documentElement.scrollHeight || 0
      if (h > 100 && h > lastH) {
        clearInterval(interval)
        lastH = h
        setHeight(h)
      }
    }, 10)
  }

  React.useEffect(() => {
    if (window) {
      setHeight(ref.current!.contentWindow?.document.documentElement.scrollHeight || 0)
    }
  }, [window])

  // onLoad on iframe doesnt work
  React.useEffect(() => {
    onLoad()
  }, [])

  return (
    <>
      <iframe
        src={'/klaviyo-form?id=' + id}
        ref={ref}
        height={height + 'px'}
        className="w-full"
        id="iframe"
        scrolling="no"
      />
      {height < 100 && <div className={`bg-gray-200 animate-pulse h-96 rounded`}></div>}
    </>
  )
}

2. Create a page to display the form. Dont miss to set YOUR_ID

import Script from 'next/script'
import React from 'react'

export default async function page({ searchParams }: { searchParams: { id: string } }) {
  if (!searchParams.id) return <p>Missing form id</p>

  return (
    <>
      <Script
        src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_ID"
        strategy="afterInteractive"
        id={'klaviyo'}
      />
      <div className={'py-6 klaviyo-form-' + searchParams.id}></div>
    </>
  )
}

3. Use like this on a page

import { KlaviyoForm } from '@/components/KlaviyoForm'
import React from 'react'

export default async function Salja() {
  return (
    <main>
      <KlaviyoForm id="YOUR_FORM_ID" />
    </main>
  )
}

Hi,

Our e-commerce platform utilizes Backbone and we're encountering the same issue. It's surprising that Klaviyo doesn't support SPA in 2023. Is there a projected date for a fix to this problem?"

Thanks!

Just had contact with support, they don’t have any idea if this is on the roadmap or not. Neither do they now what priority this has on their side.

The Klaviyo embedded forms are completely useless when you are on a react based website.