These steps will add a special Instagram field to an existing form on your website. The instagram handle, email and name (optional) will automatically pass to your Gatsby account for enrichment & automation.

The Instagram field is optional for your customer to fill out.

Every installation is a little bit different, but here is the main 3-step guide:

Step 1: 

Make sure you have your main Gatsby tag already added to your website, and then:

Add this to the main theme:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">$(document).ready(function(){
$('#form name . button name').click(function(event){
event.preventDefault();
handle_instahandle('checkout-demo-email')
$('#form name').trigger('submit')
})
})
</script>

note: the bold italics are variables for you to insert

Step 2:

Add the following <div> to where you want the Instagram capture field to appear:

<div id="gatsby_handle"></div>
<style>#gatsby_handle{ }</style>

note: Shopify users, if you're trying to add this to checkout.liquid, you need to be on Shopify Plus

Step 3: 

Style the Instagram field, example:

<style>#gatsby_input_handle{
    height: 50px !Important;
    border: 2px solid #59c19d !Important;
    border-radius: 6px !Important;
    font-size: 17px !Important;
    line-height: 30px !Important;
    font-weight: 300 !Important;
    text-align: left !Important;
    margin-bottom: 10px;
    padding: 10px 12px !important;
 
  }</style>

Check out the source code on our demo at https://www.gatsby.ai/checkout-integration-demo or a very simple HTML form demo example, here: http://beta.brstdev.com/gatsby/test.html

Contact us with questions, we're happy to help hands on.

Did this answer your question?