Skip to main content
Solved

Issue: Klaviyo Embed forms only appearing once per session in Next, Remix, Gatsby etc.


Forum|alt.badge.img+1

Dear Klaviyo developer team—

I’ve consistently been running into a problem with embed forms in SPA type sites (or even SSR/SSG hybrid type sites) and so have many others:

 

Take this example (Typescript):

import { useEffect } from 'react'

interface KlaviyoFormProps {
  listId: string
}

// Declare the _klOnsite property
declare global {
  interface Window {
    _klOnsite?: any
  }
}

export default function KlaviyoForm({ listId }: KlaviyoFormProps): JSX.Element {
  useEffect(() => {
    window._klOnsite = window._klOnsite || []
    window._klOnsite.push(['openForm', listId])
  }, [listId])

  return (
    <div className="" title={`klaviyo-form-${listId}`}>
      <div className={`klaviyo-form-${listId}`}></div>
    </div>
  )
}

When it shows:

  • On first page load/refresh (page with form)
  • Starting on homepage (or other page in app) and navigating to page (within JS router)

When it doesn’t show:

  • After page with form has been viewed, navigating to other pages (within JS router), and returning to page, form no longer shows.

So after digging around the forums for answers, it appears the only workaround is to load this into an iframe instead in order to force some refresh. Bit of a hack...

Question is, how is Klaviyo deciding when to show a form after the trigger? Keeping it hidden after first view is good UX for popup/flyover forms because you want these to stay dismissed, but for embeds you need these to show when ever they are being triggered.

Question: Is this localStorage item preventing embed forms from being re-triggered?

There appears to be a localStorage value saved by klaviyo which is doing this tracking:

 

Proposed solution:

Only track flyover/popup forms in this viewedForms object.

 

 

Best answer by Brian Turcotte

Hi @moreguppy!

My apologies for the delay here - at this time, Klaviyo doesn’t support SPA, so this use case is beyond the scope of Community/Support.

 

That said, I will update the thread if anything changes in the future.

 

Best,

Brian

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @moreguppy!

I’m going to check on this with Engineering for you and I’ll update the thread ASAP!

Best,

Brian


Brian Turcotte
Forum|alt.badge.img+37
  • Klaviyo Alum
  • 1393 replies
  • Answer
  • January 24, 2024

Hi @moreguppy!

My apologies for the delay here - at this time, Klaviyo doesn’t support SPA, so this use case is beyond the scope of Community/Support.

 

That said, I will update the thread if anything changes in the future.

 

Best,

Brian