This help article walks through how to capture Instagram handles with your Klaviyo popup and automatically send them to your Gatsby account for influence data & automation.

Step 1: 

Log into Klaviyo >> Signup Forms >> Create a field for Instagram name:

Step 2: 

Set the Profile Property as: instausername and publish changes

Step 3: 

If you are using Shopify, login to your admin console >> Online Store >> Actions >> Edit Code

Open Theme.Liquid:

Paste the following code directly above the </body>:

<script>

window.addEventListener("klaviyoForms", function(e) {
 if (e.detail.type == 'submit') {
gatsbyKlaviyoIntegration(btoa('your email address for Gatsby'),e.detail.metaData["$email"],e.detail.metaData["instausername"]);
 }
});

</script>

And just replace the [bold field] with your email address tied to your Gatsby account. It is case sensitive, and leave the single quotation marks there around the email address.

Note: if you do not have a Gatsby account, make one quickly here.

Step 4:

Go back to Klaviyo >> Account >> Settings >> API Keys

Click "Create API Key"

Edit the label to "Gatsby" and copy the Private API key into your mouse:

Go back to your Gatsby account >> Integrations >> Click "Connect" under Klaviyo.

Enter your Private Klaviyo API Key and press "Integrate"

After pressing "Integrate" (and it may take a few moments to respond, sometimes you need to click it twice), a new field will appear...

Select the Klaviyo list you would like the subscribers to be placed in (this is really only relevant if you're integrating Klaviyo but using a Gatsby popup).

Press "Integrate" a second and final time:

That's it 🎉 

Now the social data, like # of followers, will automatically be synced to that subscriber's record in Klaviyo.

Step 5 (for brand new Gatsby accounts only):

If you installed Gatsby originally via the app in the Shopify App Store, then you are done.

If you installed Gatsby manually, then make sure you have the main script file also on your website. It should look something like:

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

If this doesn't make sense, follow this guide here: http://help.gatsby.ai/how-to/how-to-install-gatsby-on-shopify

Let us know any questions!

Did this answer your question?