Solved

load Klaviyo form dynamically

  • 4 December 2020
  • 12 replies
  • 2096 views

Badge +2

Hi,

we use Klaviyo in our Shopware System. The normal integration with a Shopware Plugin works very good. But on our shop web site we have sections which are loaded dynamically with Ajax. 

My question is: How can I make Klaviyo render a form which was added to the page after initial page load. After the Ajax call I can see the html code of the form in the browsers web developer (something like <div class="klaviyo-form-xyzabc123"></div>) Now the Klaviyo Script has to render this form. How can I do that?

 

Thanks in advance.

kautsch-surfer

icon

Best answer by caroline 17 December 2020, 04:18

View original

12 replies

Badge +2

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.

Badge +3

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.

Badge +2

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?

Userlevel 5
Badge +8

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

Badge +2

Ok, thank you.

In the meantime we managed to resolve this issue with an own plugin.

Userlevel 5
Badge +8

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

Badge +2

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 :-)

Userlevel 1
Badge +2

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?

Userlevel 5
Badge +8

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

 

 

 

Userlevel 1
Badge +2

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.

Badge

Any update on this?

Userlevel 7
Badge +36

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

Reply