Gatsby + LoyaltyLion setup guide

Integrate Gatsby with LoyaltyLion to give your customers loyalty points for entering their social handles, mentioning your brand on Instagram & TikTok and more. ~15 minutes to set this up.

Before you begin, it's important to note that in order for this integration to work, your customer must be in both your Gatsby and LoyaltyLion accounts, using the same email address in both.

To help with this, we suggest you implement our native LoyaltyLion form for collecting Instagram and TikTok handles directly on your LoyaltyLion page. Details for this are included below in the step-by-step.

LoyaltyLion with Gatsby Form Native

 

Short Demo Video 1: Instagram Point Offers

Give points for submitting Instagram Handle, DMing your brand, tagging in Instagram Story

Short Demo Video 2: Instagram & TikTok Mentions

Loyalty Points for publishing a TikTok video with a Hashtag and Tagging in Instagram Story

Setup Guide

Full Step-by-Step, Walk Through Implementation Together

 

Step 1: Connect Gatsby with LoyaltyLion

Log into LoyaltyLion >> Manage >> Configuration >> Settings >> Note your Token & Secret

Log into Gatsby >> Integrations >> LoyaltyLion and enter your Token & Secret

Screen Shot 2022-06-01 at 1.31.45 PM

Step 2: Create Custom Rules in LoyaltyLion

Custom Rule LL

 

We suggest you create the first 5 available rules now (the 6th one below for revenue tracking can be done later).

 

The only field that matters for the integration to work is the Identifier field. For example:

ll identifier

The following Identifier fields need to be set as follows for each Custom Rule:

  1. Reward for Instagram Handle Submitted use the identifier: ig_submitted_gatsby
  2. Reward for TikTok Handle Submitted use the identifier: tiktok_submitted_gatsby
  3. Reward for Instagram Mentions use the identifier: ig_mention_gatsby
  4. Reward for TikTok Mentions use the identifier: tiktok_mention_gatsby
  5. Reward for Instagram DM / Instagram Verified use the identifier: ig_verified_gatsby

 

*Reward for Referring Sales use the identifier: order_tracked_gatsby

*Revenue tracking requires that you give this customer a referral code generated in Gatsby. Contact us about setting this up

 

Besides the identifier field, everything else in the Custom Rule setup can be set as you wish.

Examples

For example, your Instagram Mentions rule may look something like this:

Screen Shot 2022-07-01 at 8.18.10 AM

That Description, if you want to copy / paste it is:

<p>Tag us on Instagram, earn 100 points!</p>

<p>Note: you <strong>must</strong> complete the 'Enter Your Instagram Handle' first, and be sure to tag us @xyzbrand in your Post or Story for us to track it. You can earn points for this once every 30 days.</p>

 

Your TikTok Mention Custom Rule may look like this:

Screen Shot 2022-07-01 at 8.24.31 AM

That Description, if you want to copy / paste it is:

<p>Publish a TikTok video with hashtag #loveXYZ to earn points!</p>

<p>Note: you <strong>must</strong> complete the 'Enter Your TikTok Handle' first, and be sure to include the #loveXYZ hashtag in your video’s caption for us to track it. You can earn points for this once every 30 days.</p>

 

Your Instagram DM custom rule may look something like this:

Screen Shot 2022-07-01 at 8.23.06 AM

That Description, if you want to copy/paste it is:

Send us a DM with the word "loyalty" to earn these points and verify your Instagram Profile in our system. <p>Note: you <strong>must</strong> complete the 'Enter Your Instagram Handle' first. You can earn these points once per month.</p>

 

Your Instagram Handle Custom Rule may look something like this:

Screen Shot 2022-07-01 at 8.26.23 AM

Step 3: Update loyaltylion.liquid in Shopify

To embed the native forms in LoyaltyLion that power the 'Instagram Handle Submitted' and 'TikTok Handle Submitted' rewards (example shown below), you need to complete two minor updates to the loyaltylion.liquid page in Shopify. 

LoyaltyLion with Gatsby Form Native

 

These two updates are outlined below, step-by-step:

 

Go into Shopify >> Online Store >> Themes >> Edit Code >> Search for loyaltylion.liquid

You're going to make two updates that look similar to the two lines with arrows shown below:

loyaltylionliquidwithgatsby

 

To update those two lines shown with the arrows:

First, create a line directly above </script> and paste the following:

const customer_email= "";

 

It will look like this:

Screen Shot 2022-07-01 at 7.53.59 AM

 

Secondly, go into your Gatsby account >> Integrations tab >> click the 'Copy Script' button next to your Default Form for LoyaltyLion:

Screen Shot 2022-07-01 at 7.47.11 AM

Then go back to Shopify, and create a line directly under </script> at the bottom of the loyaltylion.liquid page.

 

Paste the Default Form Script shown in your Gatsby account:

It will look similar to the following except with your brand name in it

<script src="https://gatsby-statics.gatsby.tech/[yourbrandname]/loyalty_script.min.js"> </script>

 

Once pasted, it will look like this:

Screen Shot 2022-07-01 at 7.54.46 AM

 

Conclusion:

When set up correctly, you'll see points going through like the following:

Screen Shot 2022-07-01 at 9.59.55 AM

For a full demo and to see this in action, be sure to watch the videos embedded at the top of this article. Thanks, we're here if you have any questions!