Gatsby + Stamped Setup Guide

Integrate Gatsby with Stamped 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 Stamped accounts, using the same email address in both.

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

Stamped Gatsby Instagram Form GIF

First, watch 5 minute screencast where we walk through the setup:

Then, this is how it works once you have it setup:

Step by Step Guide:

Step 1: Create A Custom Rule for Instagram Handle Collection

Log into Stamped >> Loyalty & Rewards >> Points >> Add New RuleStamped Add New Rule Screenshot

Scroll to the bottom to Custom Activity, click Add Rule

Screen Shot 2022-06-13 at 12.35.00 PM

Fill out the details any way you would like except for the following:

Description: description need to be exactly as follows in order to launch the in-line form.

Copy the code below for the Description Field for "Submit Your Instagram Handle":

<input type="text" name="gatsby_insta_handle" placeholder="Enter Instagram handle" id="gatsby_insta_handle" required />     <p class="gatsby-error gatsby-insta-errors" id="gatsby-insta-errors"></p>                        <div class="gatsby-loader" id="gatsby_insta_loader"></div>                                  <div class="gatsby-form-group">                                              <button class='gatsby-submit  stamped-rewards-content-button' id="gatsby_insta_Submit" onclick="parent.handleSubmit(handletype='Instagram')">Submit</button></div>

Paste it in the Description Field:

Screen Shot 2022-08-23 at 1.43.43 PM

Example of how this form looks on a real customer site (bottom left):

Screen Shot 2022-08-23 at 1.34.45 PM

Step 2: Create A Custom Rule for TikTok Handle Collection

Same steps as above except use the following description text to copy/paste:

Description Field for "Submit Your TikTok Handle": 

<input type="text" name="gatsby_tiktok_handle" placeholder="Enter TikTok handle" id="gatsby_tiktok_handle" required />        <p class="gatsby-error gatsby-tiktok-errors" id="gatsby-tiktok-errors"></p>     <div class="gatsby-loader" id="gatsby_tiktok_loader"></div>         <div class="gatsby-form-group">              <button class="gatsby-submit stamped-rewards-content-button" id="gatsby_tiktok_Submit" onclick="parent.handleSubmit(handletype='TikTok')"> Submit</button>     </div>

Screen Shot 2022-08-23 at 1.45.01 PM

Example of how this form looks on a real customer site:

Screen Shot 2022-08-23 at 1.45.56 PM

Step 3: Create Custom Rules to Give Points for Instagram and TikTok mentions

Go To Stamped Loyalty >> Add New Rule

Stamped Add New Rule Screenshot

Scroll to the bottom to Custom Activity, click Add Rule

Screen Shot 2022-06-13 at 12.35.00 PM

Fill out the details any way you would like (however we have a suggested descriptions for you to copy/paste)

Screen Shot 2022-08-23 at 1.50.59 PM

Suggested Description for Instagram Mention:

Step 1: Enter your Instagram handle using the form below  <br> Step 2: Tag us in your Story or Feed and get 100 points!

If you did the above for Instagram Mention, repeat the same steps for TikTok mentions.

Suggested Description for TikTok Mention
(be sure to change the #hashtag in the description to what you set Gatsby to track):

Step 1: Enter your TikTok handle in the form below  <br> Step 2: Publish a TikTok video with #yourhashtag and get 100 points!


These descriptions look like:

Screen Shot 2022-08-23 at 1.53.58 PM

Step 4: Copy Campaign IDs to Gatsby

Once you're done creating your Custom Activity Rules, and you're at the bottom of Custom Activity setup, copy the Following Campaign IDs into your mouse.

1. campaignId for the Instagram Mention custom activity

2. campaignId for the TikTok Mention custom activity

Campaign ID Stamped

Step 5: Paste the IDs in Gatsby

Open Gatsby >> Integrations >> Stamped >> and paste your corresponding Campaign IDs:

Gatsby Integrations Page Stamped

Once that is done, be sure to copy the rest of your Stamped Keys from:

Stamped >> Loyalty & Rewards >> Settings >> API Keys

Screen Shot 2022-06-13 at 12.45.00 PM

Once you fill in all 4 or 5 fields in Gatsby (4 if you are not doing TikTok), click Integrate and you'll see a blue success message and a new field show up with a Default Form script:

stamped integrated gatsby

Screen Shot 2022-08-23 at 2.14.51 PM

 

Step 6: Paste Default Form Script on Shopify theme.liquid page

Copy the Default Form script from above into your mouse and then head to Shopify >> Online Store >> Theme >> Edit Code

Screen Shot 2022-08-23 at 2.17.43 PM

Then open theme.liquid >> scroll to very bottom and right above </body> paste your Default Form script that is in your mouse. Click Save when you're done.

Stamped Default Form Script Screenshot

You're done!

Testing The Integration

To test this is working, simply enter the Instagram handle into the form first, and then tag your brand from that Instagram account. Instagram tags may take up to 15 minutes to appear. Do the same for TikTok. But remember TikTok tracking is based on you using a particular hashtag, not tagging your brand in the TikTok video.

For example, it will look something like this:

Screen Shot 2022-08-23 at 2.09.59 PM

Screen Shot 2022-08-23 at 2.10.55 PM

Screen Shot 2022-08-23 at 2.10.49 PM

Screen Shot 2022-06-13 at 12.58.27 PM

Please let us know any questions!