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.
