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:
Note: 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 loyalty page. Details for this are included below in the step-by-step.
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:
Note: Don't worry that the code you're pasting for the description contains "tiktok-rule", it's correct.
(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>
Caution: Be sure to change @username and point value in the description for your specific brand details.
(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>
Caution: Be sure to change #hashtag and point value in the description for your specific brand details.
(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>
Caution: Be sure to change keyword and point value in the description for your specific brand details.
(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!