This custom integration enables you to capture Instagram handles with your Justuno popup and automatically pass them into your Gatsby account for insights. Justuno is great for setting up advanced targeting rules with your popup.

Requirements: Access to your Gatsby account, email marketing account (like Klaviyo), and your Justuno account

No developer required, and no need to add any Gatsby code to your website

How it works: You will be able to keep your current Justuno popup styled as is, and you'll just be creating a new form within that popup that includes the Instagram handle field along with your Gatsby brand ID and Post URL. This may sounds technical, but it's very simple:.

Before starting, watch the 1 minute tutorial:

Step 1: Find your Gatsby Brand ID

  1. Log into Gatsby

  2. Click Integrations in the header

  3. Scroll down and just take note of your Brand ID. You will need it later

Step 2: Make sure your ESP is connected to Justuno

  1. Log into Justuno and make sure your email provider is integrated at the home level. This is important because Gatsby only receives data on new subscribers that opt to enter their Instagram handle and we want to make sure your email provider, like Klaviyo, still receives the email addresses of every subscriber, even those who don't provide an Instagram.

To do this click on the 3 dots next to your Justuno popup >> Settings

Select Integrations and scroll down to connect with your ESP / Email Provider

Step 3: Update your Justuno form for Instagram Handle and pass to your Gatsby account

  1. Now click the paintbrush on the Justuno form you want to update

  2. Click directly on the email field in that popup form so that a green "Change Form" button appears to your right

And now follow these couple simple steps from Justuno on embedding a form using html:

https://support.justuno.com/embed-a-form-from-esp-collect-more-than-just-emails

NOTE: if you do not see the button for "Custom Code" then you probably have an email provider connected directly in the form level here. If so, go ahead and delete your current form entirely since you just connected your ESP at the home level in Step 2 above. Once that form is deleted, create a new one by going to Add Layer >> Email Form

Now you should be able to click on the Change Form button and see this field for "Custom Code":

Click into that Custom Code option and simply copy / paste the following:

<form action="https://gatsby.tech/shopper/post">
<label for="email">Email Address</label><br>
<input type="email" required="true" id="email" name="email" value=""><br>  
<label for="instausername">Instagram Username</label><br>         
<input type="text" required="false" id="instausername" name="instausername" value="">
<input type="hidden" required="true" id="brandID" name="brandID" value="YOUR BRAND ID"><br><br>  
<input type="submit" value="Submit">
</form>

Replace the YOUR BRAND ID with the ID you found in Step 1 above from Gatsby. Keep the quotation marks around it.

Optional: If you need to add additional input fields to your form, ie: for the customer's Phone #, just add them in using the same html format:

<label for="phone">Phone Number</label><br>
<input type="phone" required="false" id="phone" name="phone" value=""><br> 

Step 4: Touch up your Justuno Popup

  1. Your Justuno form may need some slight redesigns, like replacing the button location etc. Spend a few minutes making your popup look great

Step 5: Save & Publish

  1. Be sure to save & publish your updates in Justuno

  2. Be sure to click the Launch Campaign or Update Campaign button in Gatsby as well, available in the Gatsby header.

Once you're live, you can test that it is working by adding an email address and Instagram handle into your popup and confirming that the submission appears in both your Justuno and Gatsby dashboards.

Many clients also use this integration in conjunction with our Klaviyo integration, for automated outreach and flows. To connect your Gatsby insights with Klaviyo for Automated Flows, please continue to this guide, starting on Step 2.

ALTERNATIVE OPTION (BETA)

Instead of all the steps above, you can just add a different snippet of code to an existing popup you have, and you can leave your ESP connected as-is.

All you need to do is click "Custom Code" on the top right of the Designer:

And paste the following under Pop Up JS:

function ju_callback(t,email){
if (t==10){
customFormData = {
"email":$('input[name="email"]').val(),
"instausername":$('input[name="instausername"]').val(),
"brandID":"ADD GATSBY BRAND ID HERE"
};
jju.ajax({
type: "POST",
url: 'https://gatsby.tech/shopper/post',
data: customFormData
});
}
}

Just be sure to paste your Gatsby Brand ID where it says on that line. Keeping the quotation marks:

Did this answer your question?