This guide walks you through adding a Klaviyo embedded form to your WooCommerce site footer. Unlike other signup forms, embedded forms require you to add your form's embed code to your site where you want your form to appear.
Before adding an embedded form, you must first install klaviyo.js to your site. Follow the instructions in our guide to Integrating with WooCommerce or check out our general guide on Installing Klaviyo Signup Forms.
Copy Your Form's Embed Code
When you publish an embedded form from your Klaviyo account, after selecting publish, you'll see a popup with your form's embed code.
You can also get this code by opening your form in the editor and clicking to Behaviors tab. Copy this code and use it to add the form to your site.
Add the Embed Code to Your Site
To add your form's embed code we're going to follow a three-step process:
- Locate where on your site you want to add your form.
- Get to where you can edit the HTML of your site.
- Paste in your embed code, and adjust your form's styles as needed.
This general approach works for adding a Klaviyo form to any site. Keep in mind that your theme may differ, along with some of the names of files or the locations of code snippets.
The first step is to decide and locate where you want to add your embed code. In this example, we'll cover adding a Klaviyo embedded form to a footer.
From the dashboard, head to Customize Your Site > Widgets > Footer 1 (or wherever you would like to add your form) > Custom HTML. From there, paste the code taken from the form builder in Klaviyo. Select done and publish the form to your site.
You should then see the embed in the footer of your site.