Connect Gatsby with Klaviyo Signup Forms

You can ignore step 2 if you installed us from the Shopify App Store

Quick Summary:

In a few minutes, you will be capturing Instagram handles with your Klaviyo form and automatically sending them to your Gatsby account for influencer insights.

Once connected, you will be able to create Klaviyo segments to automatically email your customers based on how many Instagram followers they have, and trigger rewards & automated flows when they tag you media.

This integration unlocks new Klaviyo flows for influencer marketing, eliminating the manual processes of finding influencers, coordinating collabs, tracking when influencers post, issuing rewards, and measuring performance.

This the easiest way to convert your social customers into brand ambassadors and influencers automatically, thank you for choosing us. Let's get started:

This guide makes a couple assumptions:

  1. The Klaviyo form you're using is not in an A/B test. Currently this integration does not support forms that are in an A/B test.

  2. The Klaviyo form you're using has email and handle on the same step. You can use mult-step forms, but email & instausername must be on the same step.

Before we begin. please watch a 3-minute video demo if you haven't already:

Step 1: Capture Instagram Handles With Your Klaviyo Form

  • Log into your Klaviyo account

  • Navigate to the "Signup Form" that's published on your website or create a new form

  • Our top suggestion is to start with an embedded form that you add to your order confirmation page. Those specific steps are here.
  • Create a text input field for Instagram handle, ie: "Your @Instagram"

  • Name the "Profile Property" for that field as exactly: instausername

  • Publish changes

 

To collect TikTok handles in your Klaviyo form, repeat the steps above and then:

  • Name the "Profile Property" for that text input field as exactly: tiktokusername

Step 2: Manually add your script tag (ignore if using Shopfiy app)

This is only for customers who did not install Gatsby from the Shopify App Store. If you came through the Shopify App Store then skip this step.

For this step you are going to add your main Gatsby tag to your website - if you haven't added it already.

The following screenshots show a Shopify backend, but it's the same process for any backend - you're just adding these tags to your main theme file's <body>.

Example using Shopify, but same general process applies to all websites:

  • If you are using Shopify (but did not install us via the App Store), login to your admin console >> Online Store >> Actions >> Edit Code

  • Open Theme.Liquid:

  • Create a couple new blank links directly above the </body> tag.

  • Now go back into Gatsby >> Install tab and left click anywhere in the black box to automatically copy your main Gatsby tag into your mouse.

It should look something like this (but do not just copy the generic tag below, please copy your specific tag from the black box in your Gatsby account)

<script src="https://gatsby-statics.gatsby.tech/[your-brand-name]/script.min.js"></script>

Paste the tag that's in your mouse in the new blank line you created in your theme.liquid file, directly above </body>.

Step 3: Press Launch / Update Campaign button

Press the "Launch Campaign" button (or it might say "Update Campaign" button if you've already launched before). This button is available in Gatsby header. Press this button every time you make changes, to ensure all saved changes publish live.


That's it - now the Instagram handles from your Klaviyo signup form will pass to your Gatsby account for insights. Please advance to this guide now on syncing those insights back to your Klaviyo account.

Advance to Next Step of Klaviyo Integration >