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.
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:.
NEW INTEGRATION METHOD (BETA)
You can now just add a snippet of code to an existing Justuno popup you already have (and it can be still be connected to an ESP, Klaviyo)
Please watch this video demonstration:
All you need to do is click "Custom Code" on the top right of the Designer:
And paste the following under Pop Up JS:
Just be sure to paste your Gatsby Brand ID where it says on that line. Keeping the quotation marks:
You may need to go back now and add your Klaviyo ESP if it's not already connected. If this is the case, please watch the video above for those details.
And lastly if you have any issues with the forms syncing to Gatsby, make sure your Form Labels are turned on. This video from Justuno shows how to confirm that:
Let us know if you have any questions!
Alternative Option / Original Integration Method
The below was the original method that clients integrated Gatsby + Justuno.
Before starting, watch the 1 minute tutorial:
Step 1: Find your Gatsby Brand ID
Log into Gatsby
Click Integrations in the header
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
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
Now click the paintbrush on the Justuno form you want to update
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:
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:
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:
Step 4: Touch up your Justuno Popup
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
Be sure to save & publish your updates in Justuno
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.