Since nobody has an answer, yet, let me put it differently:
Where can I find information on how to initialise Klaviyo with JavaScript. I need a function to initialise Klaviyo and render forms.
I asked one of our engineers who worked on the feature and he said that if klaviyo.js is added we will watch for DOM updates and render an embedded form once the div is inserted. Not sure if you’re asking about embedded or popup.
Thank you very much for your response.
That means that it should work. But unfortunately it doesn’t :-(
The script is added in the <head> of the page: /onsite/js/klaviyo.js?company_id=xyzabc
After the ajax call also the form code is added to the page: <div class="klaviyo-form-abcxyz"></div>
That should be all, right?
Since the Klaviyo script is minified, it’s a black box for me.
Do you have any hint, how I can fix it or at least debug the problem?
Hi there,
Sorry for any confusion. Although we do not currently have an API to “force render” a form, it is a known feature request that has been passed along to our team for consideration.
Best,
Caroline
Ok, thank you.
In the meantime we managed to resolve this issue with an own plugin.
Hi there,
Any chance you would be able to specify which plugin you ended up using? I’m sure it would be super helpful for any users who stumble upon this thread in the future.
Thank you!
Best,
Caroline
Hi Caroline,
sorry, I don’t have any useful information for you.
We deactivated dynamic loading for this special purpose and make page loads instead. Not a very modern solution but it was ok for our customer :-)
Hi there,
Do we have any solution to this now?
I have ran into the similar issue like this, I have embedded the Klaviyo form in the ReactJS site and as the site is SPA, the page doesn’t refresh actually, so to load Klaviyo form we are forced to refresh the Klaviyo form implemented pages. Do we have any event or function to initialize / re-initialize or load the embedded klaviyo form?
Hi @karan.tipl,
Sorry for the late response on this. It looks like @cbarley answered your question in the separate thread you created. I’ll paste the content below for future readers of this question.
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
Hi @karan.tipl,
Sorry for the late response on this. It looks like @cbarley answered your question in the separate thread you created. I’ll paste the content below for future readers of this question.
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 @CarolineL,
I mentioned this in this thread as well, but we’ve gather everyone’s feedback and this is definitely on our Product Team’s radar. I’ll update both threads when I know more.
Thanks,
Brian
Hi,
I am using Klaviyo scripts across my entire website. The Klaviyo form displays correctly the first time a page is loaded. However, when we navigate away and return to the same page, the form does not reappear.
We have conducted internal tests and could not resolve the issue on our end. We noticed that the code is not being injected into the Klaviyo div tag after navigation. The form only reappears if the page is refreshed.
How can I solve this issue?
