Klaviyo Wix Integration - Embed Klaviyo Forms on Wix

Are you having trouble geting Klaviyo forms embedded on Wix? Are you installing the Klaviyo form div code provided in an iframe, and it is not showing up on your Wix page?

If your Klaviyo embed form is not showing up on Wix, it's because you need more complete code.

Embedding Klaviyo forms on Wix Websites: As a Wix Designer, I have found that Klaviyo's Embed code doesn't work on Wix websites. Klaviyo only provides a tiny snippet of code, <div class="klaviyo-form-QZPFwy"></div> which doesn't embed anything when inserted in a Wix HTML iframe, as I expected. But don't worry, you CAN embed a Klaviyo form in an iframe on a Wix webpage, you just need the whole script code to do it, find it below...

Klaviyo does have a separate Wix integration option, but I think this only works with Klaviyo popup forms, which aren't always what is desired if you just want to embed their form on a page on Wix. Personally, I find popups annoying and anti-user-experience. So I like to embed subscribe/contact forms, and link to them from smaller subtler and less obtrusive buttons on the page for users to get to the forms rather than have them pop up in their faces and block the website. I think we could all use with a little less popups these days! ;)

So, if you would rather just embed your Klaviyo forms on a page on your Wix website, here is the easy way how:

HOW TO EMBED A KLAVIYO FORM ON A WIX WEBPAGE:

What we NEED from Klaviyo is the FULL script that goes along with the embed, but for some reason they don't provide that, so I've placed it here for future use for all of you Wix users - copy and paste this code snippet below, and then change out the pink div code and API key text below with the code and key provided by Klaviyo:

<div class="klaviyo-form-QZPDFwy"></div>

<script type="text/javascript">

    (function() {

        var kl = document.createElement('script'); kl.type = 'text/javascript'; kl.async = true;

        kl.src = 'https://static.klaviyo.com/onsite/js/INSERT-KLAVIYO-API-KEY-HERE/klaviyo.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(kl, s);

    })();

</script>

A couple notes:

1. The first line with the <div> form tag is provided on the page in Klaviyo after you "Publish" a form.

   
   

   

   
   

2. To find your Klaviyo API key, go to Settings (by clicking on the client name in the lower left corner) then click on Settings > API Keys in the left menus. See screenshot below:

Klavivyo Wix App:

Wix also has a Klaviyo App that you can install on the site which allows for Mailing List Subscriptions and management, plus Wix Store real-time integration, syncing Abandoned Checkout, Ordered Product, Placed, Refunded, and Canceled Orders with catalog, variant, and tag properties so you can use this data across your messages and revenue reporting. wix.com/app-market/web-solution/klaviyo