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.
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
Step 2: Create Custom Rules in LoyaltyLion
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:
The following Identifier fields need to be set as follows for each Custom Rule:
- Reward for Instagram Handle Submitted use the identifier: ig_submitted_gatsby
- Reward for TikTok Handle Submitted use the identifier: tiktok_submitted_gatsby
- Reward for Instagram Mentions use the identifier: ig_mention_gatsby
- Reward for TikTok Mentions use the identifier: tiktok_mention_gatsby
- 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:
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:
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:
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:
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.
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:
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:
Secondly, go into your Gatsby account >> Integrations tab >> click the 'Copy Script' button next to your Default Form for LoyaltyLion:
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:
Conclusion:
When set up correctly, you'll see points going through like the following:
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!