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.