Connecting Gatsby + LoyaltyLion

Reward your customers with loyalty points when they mention your brand on Instagram & TikTok

Before getting into the step-by-step, take a look at this 1-pager on the integration and watch brief demo videos below.

 

Demo video of integration, showing Instagram features:

 

Demo video of integration, showing TikTok features:

 

Preview of the step-by-step instructions:

 

---

Step 1: Find your LoyaltyLion Keys

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

 

---

Step 2: Add LoyaltyLion Keys to Gatsby

Log into Gatsby >> Integrations >> LoyaltyLion.

Click connect and enter your Token & Secret into the fields:

 

---

Step 3: Custom Rule: Points for submitting Instagram Handle

Go to LoyaltyLion >> Manage >> Create new rule >> Custom Rule

The only two fields required for the integration to work are the Identifier fields and the Description fields, as follows:

Identifier: ig_submitted_gatsby

Description: copy/paste the follow code into the Description field, this launches the native form to collect Instagram handles.

<div class="gatsby-tiktok-rule"> <div class="gatsby-custom-form-group"> <input type="text" placeholder="Instagram Handle" name="gatsby_insta_handle" id="gatsby_insta_handle"/> <button class="gatsby-submit-button" onclick="gatsbyInstaHandleSubmitAction()">Submit</button> </div> </div>

The resulting form you're creating will look something like this when you're all done:

 

---

(Optional) Step 4: Custom Rule: Points for submitting TikTok Handle

Repeat Step 3, except this time use the following identifier and description:

Identifier: tiktok_submitted_gatsby

Description: 

<div class="gatsby-tiktok-rule"> <div class="gatsby-custom-form-group"> <input type="text" placeholder="TikTok Handle" name="gatsby_tiktok_handle" id="gatsby_tiktok_handle"/> <button class="gatsby-submit-button" onclick="gatsbyTiktokHandleSubmitAction()">Submit</button> </div> </div>

The resulting form you're creating will look something like this when you're all done:

 

---

Step 5: Custom Rule: Points for tagging you on Instagram

Repeat the steps to create a Custom Rule, this time use the identifier of:

identifier: ig_mention_gatsby

Description: can be whatever you would like, but we provided suggested text below:

<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>

---

(Optional) Step 6: Custom Rule: Points for tagging you on TikTok

Repeat the steps to create a Custom Rule, this time use the identifier of:

Identifier: tiktok_mention_gatsby

Description: can be whatever you would like, but we provided suggested text below:

<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>

 

---

(Optional) Step 7: Custom Rule: Points for sending Instagram DM

Repeat the steps to create a Custom Rule, this time use the identifier of:

identifier: ig_verified_gatsby
Description: can be whatever you would like, but we provided suggested text below:

<p>Send us an Instagram DM, get 50 points</p>

<p>Note: you <strong>must</strong> complete the 'Enter Your Instagram Handle' first, and be sure to include the keyword "verify" in your Instagram DM message for us to track it. You can earn points for this once every 30 days.</p>

---

(Optional) Step 8: Custom Rule: Points for referring sales revenue

Repeat the steps to create a Custom Rule, this time use the identifier of:

Identifier: order_tracked_gatsby
Description: can be whatever you would like, but we provided suggested text below:

<p>Refer your friends, get 100 points per referral order</p>

<p>Note: you <strong>must</strong> complete the 'Enter Your Instagram Handle' first, and receive a referral code from us before being able to earn points for referrals. If you haven't received your referral code yet, contact us.</p>

 

---

Step 9: Update loyaltylion.liquid in Shopify

In order for the embedded forms you created in Steps 3 & 4 to work, the forms for 'Instagram Handle Submitted' and 'TikTok Handle Submitted', you need to complete two minor updates to your loyaltylion.liquid page in Shopify.

 

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

2. Create a new line directly above </script> by clicking enter, and paste the following:

const customer_email= "{{ customer.email }}";

 

It should look like this:

 

3. Next, go into your Gatsby account >> Integrations tab >> scroll down to the very bottom and click the 'Copy Script' button next to your 'Default Form for LoyaltyLion':

4. Paste that script that's in your mouse, the 'Default Form for LoyaltyLion' on the loyaltylion.liquid page on the very last line. As shown below:

If you prefer a video walk-through of these steps, watch below:

 

---

Step 10: Test the integration

Once everything above is complete, you should now be able to enter an Instagram handle into the native form on your loyalty page. You'll start to see points for the different events you complete. If you have any questions, please chat us and/or open a support ticket.

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!