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
The only two fields required for the integration to work are the Identifier fields and the Description fields.
For example:
The following Identifier fields need to be set as follows for each Custom Rule:
Rule 1: To reward for submitting an Instagram Handle use the identifier: ig_submitted_gatsby
To make the native form show up in LoyaltyLion for this Instagram Rule, copy the HTML here:
<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>
And paste it as the Description for that Rule, as shown here:
And then to make the native form show up in LoyaltyLion for this Rule, copy the HTML here:
<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>
And paste it as the Description for that Rule, as shown here:
Rule 3: Reward for Instagram Mentions use the identifier: ig_mention_gatsby
Description can be whatever you would like
Rule 4: Reward for TikTok Mentions use the identifier: tiktok_mention_gatsby
Description can be whatever you would like
Rule 5: Reward for Instagram DM / Instagram Verified use the identifier: ig_verified_gatsby
Description can be whatever you would like
Rule 6: Reward for Referring Sales use the identifier: order_tracked_gatsby
Description can be whatever you would like, however important to note: Revenue tracking requires that you also give this customer a referral code generated in Gatsby. Contact us about setting this up
Besides the identifier & description fields shown above, 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>
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:
First, create a line directly above </script> and paste the following:
const customer_email= "{{ customer.email }}";
It should 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!