Custom Integration: Gatsby

Integrate with Gatsby using Justuno custom integration.

Updated 1/6/2021

Getting started

  • Requirements: Access to your Gatsby account and your Justuno account
  • No developer required, and no need to add any Gatsby code directly to your website

Once the promotion has been created and the design has been set, you will 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:

Here is a short video that will walk through getting this setup:

 

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
    Brand ID screenshot

 

Step 2: Setting up Gatsby alongside an ESP

This step is if you plan on having an ESP setup alongside Gatsby. For example, if you would like to have Klaviyo and Gatsby within the same promotion. If you do not want an ESP on the promotion, please skip to step 3.

When setting up a Justuno built in integration, this will not allow for the Gatsby custom code to be added. To be able to add an ESP alongside Gatsby, the desired ESP will have to be setup under Settings > Integrations instead. 

Screenshot 2021-01-06 123216

Next, select Integrations and scroll down to connect with your ESP / Email Provider

Screen Shot 2020-12-14 at 12.48.52 PM

Step 3: Update Your Justuno Form

  1. Log into Justuno
  2. Follow these steps from Justuno on embedding a form using html.

When you get to the section to add "Custom Code", 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. 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> 

 

Wrapping up!

  1. Your Justuno form may need some slight redesigns, like replacing the button location etc. Spend a few minutes making your popup look great
  2. Be sure to save & publish your updates in Justuno
  3. Be sure to click the Launch Campaign or Update Campaign button in Gatsby as well, available in the 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.