Hi there,

You may want to check out the response @cbarley left on the post, Implement Embed Klaviyo forms in SPA apps like GatsbyJS / ReactJS.

I’ll also post his response below.

Hope that helps!

Best,

Caroline

Hey @karan.tipl, This is a great question. I have also made some React apps and hoped to use Klaviyo embed forms (nothing with Gatsby, but the same general ideas apply).

The short answer is that our forms don’t play nicely with Single Page Applications that use browser-side routing.

The long answer is that after testing any way to get this to work (creating a custom hook to call the Klaviyo.js tracking code, or the forms code that we add to a page with a Klaviyo form on it), it isn’t possible to programmatically refresh the form at this time. The product team is aware of this issue, though, I just don’t have a timeframe available for you on a fix for that.

If you’re using something like react-router, since we don’t re-fire the klaviyo.js script on those page changes, and you can’t programmatically force that without doing a hard-refresh, a Klaviyo embed form might not be the best solution for you.

We do have the ability to redirect existing sign up forms to Klaviyo from the frontend, so in your case, using a custom form and passing those submissions to Klaviyo is your best bet. We also have a server-side version of our Lists API, so if you had the ability to pass the data to your server, then call our Lists V2 API to subscribe somebody to that list, that would also work!

- Connor Barley, Klaviyo Solution Architect

@caroline  This solution too won’t work as APIs from ReactJS apps throws CORS error.

Hi @karan.tipl,

Could you clarify which solution you’re referring to? Using a custom form and passing those submissions to Klaviyo, or using the server-side version of our Lists API?

Best,

Caroline