Solved

Implement Embed Klaviyo forms in SPA apps like GatsbyJS / ReactJS.

  • 23 February 2021
  • 10 replies
  • 1255 views

Userlevel 1
Badge

Hi there, 

I am embedding klaviyo forms in our GatsbyJs project, you can also say ReactJS, as it doesn’t actually refresh the page while navigating between pages, the forms are not getting initialized, as the JS doesn’t go to find for embed code and implement because I believe that the forms are only initialized on DOMContentLoaded event and I didn’t find any trigger to pass formId/ListId and companyId which initializes the form. So, do I have any option to trigger the initialization or I have to do this weird thing called refresh/reload page.

icon

Best answer by cbarley 24 February 2021, 17:15

View original

10 replies

Userlevel 2
Badge

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!

 

Userlevel 1
Badge

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!

 

 

@cbarley

 

This shouldn’t be the accepted answer as to call the List APIs I have to call the APIs through Javascript Fetch, Axios or it’s own node-klaviyo npm package, but all of these throw CORS errors as these APIs should be built into another API in backend and for same the backend would be mandatory to maintain just to use Klaviyo APIs. So, the front-end ReactJS developer will never be able to implement Klaviyo forms anyway, not by embedding nor by invoking APIs with Form request data. It seems to be that Klaviyo is totally useless for the SPA apps directly. Let me tell you that, API request also leads one to implement location detector too, to pass the Location and timezone details with form submission and while Klaviyo embed forms do itself.

Userlevel 2
Badge

Hi @karan.tipl thanks for the reply. Yes you’re right, the V2 Lists API from Klaviyo’s API docs page will throw CORS errors on the frontend if you try them from the browser. That said, from the article I linked above there’s mention of an AJAX endpoint that you can use, or you can add the Lists specific form action URL to the action html attribute on the form element. Linking that here. 

The ideal solution would be of course for our forms to have an API that can refresh the form when the page changes on the frontend with React, which I’ve given to our product team as feedback. In the interim you can submit the form through that AJAX endpoint mentioned in the article I linked above and it should work properly regardless of if the page is an SPA or not. As for the IP location information, the Klaviyo tracking code should still pick that information up if the person who fills out the form becomes known to the Klaviyo cookie on your site. For your implementation, I’d recommend onSubmit making a call to our Javascript API’s identify method to cookie the user, e.g.

_learnq.push([“identify”, {

    “$email”: email from form goes here

}])

then calling the forms AJAX endpoint right after. This way you don’t lose any of the benefits of our forms and the location data our cookie can provide. 

Just chiming in here with a request for the Klaviyo library to expose the function that renders the form in place of the div with the correct ID! Given how many stores build their front end with React/Vue/Angular to package into Phonegap or Ionic to make a native app it’s really a pretty important feature, IMO.

Also chiming in that a JS API to dynamically refresh/fetch embedded signup forms would be extremely useful for our customers that have React-based stores.

Also chiming in to say this is very needed asap

Userlevel 5
Badge +32

Hi @noahsark769 and @nvassalo

 

Thank you so much for you input on this feature request! We need users like you to help us know what is a priority for our users and what you want to see! There will be an update to the thread when we have news for you on this front. 

 

In the meantime, I would like to remind you that you can submit the form through that AJAX endpoint mentioned in the article linked above and it should work properly regardless of if the page is an SPA or not! 

 

Best,

Taylor 

That’s right, the form can still be submitted! However, the form doesn’t appear on the page at all if the specific Klaviyo embed HTML is not present in the DOM when the Klaviyo script is loaded, which is the case for many single page apps, so I don’t think the ability to submit the form matters when the form itself doesn’t render. Definitely looking forward to seeing this API become available in Klaviyo JS, let me know if I can do anything to help test or anything!

Chiming in on this too...and with all due respect, the ideal solution should not be an API call, using AJAX, or anything similar. The ideal solution is Klaviyo becoming compatible with Single Page Applications! I use an SPA too and Klaviyo’s value is severely degraded on that platform. 

Chiming in to say that Im also developing a SPA and would like to use Klaviyo forms but cant at the moment because of this issue.

Reply