Setup should take about 5 minutes, no developer
Adding Gatsby to your Order Confirmation / Post-Purchase / Thank You page is one of the best places to collect Instagram handles from your customers.
Shown below are two different implementation methods, one is using a Klaviyo Form, and the second is using Google Tag Manager.
If you're using Klaviyo, we highly recommend going with a Klaviyo Form as the form is free, very easy, and requires no coding or developer.
Full 2 minute video on using a Klaviyo Form + Gatsby on Shopify:
How to Add a Gatsby Connected Klaviyo Form To Your Shopify Order Confirmation Page:
-
Create a Klaviyo Form that is type: embed
-
Create a new Text Input field for Instagram handle, ie: "Your @Instagram"
-
Name the "Profile Property" for that field as exactly: instausername
-
Make sure you're also using the standard Email field in this form
-
Only form submissions that include both an Email & Handle will sync with Gatsby
-
If you're use a 2-step form, make sure Email and Instagram are on the same step
-
Click Publish on the form and you'll get an Embed Code like this:
-
If you're on Shopify or BigCommerce, follow Klaviyo's guide here to embed this form on your post purchase page.
-
In brief: Shopify Merchants go to Shopify >> Settings > Checkout > Order processing. Under Additional scripts, add the embed code for the Klaviyo Form you just created:
-
Click Save.
If you have our Gatsby Shopify App installed on this store, then you're done.
🎉
(For non-App users only):
If you created your Gatsby account manually, then you just need to add your Gatsby script above the Klaviyo Form embed code in the Additional Scripts:
You can get your Gatsby script by going to: Gatsby >> Install tab >> and clicking down anywhere in the black box to copy your unique Gatsby code into your mouse.
Your Gatsby code should look like this with your brand name in it:
<script src="https://gatsby-statics.gatsby.tech/yourbrandname/script.min.js"></script>
Reach out to us in order to get your specific brand name.
And then you're done.
🎉
Please let us know if you have any questions. These instructions are very similar to connect Gatsby with a Klaviyo Popup form, the only difference is you don't need to add the Klaviyo Embed Tag.
Customer example:
Once this is done, be sure to sync your insights back to Klaviyo - only takes a minute.
Using a Custom Form Instead? Google Tag Manager Option:
Below is a custom Form connected to Gatsby via Google Tag Manager (guide).
Let us know if you have any questions!