This integration requires you install the Mesa Workflow Automation app for Shopify.

Mesa is happy to support you and this integration. Contact Mesa Support here.

Getting into this, you'll notice there is some code involved, but it does not require a developer, we give you everything you need to get this done, and you won't have to mess with theme files or anything. Please plan on 30 minutes from start to finish.

Once you have the Mesa app, continue below:

1. In the MESA dashboard, click Create New Workflow

.

2. Under the Popular Apps tab, click on Forms by MESA app.

3. Click on the Open Form Builder button in the Form Trigger.

4. Drag the Text Field and Hidden Input fields onto the left-hand side within the Form Builder.

5. For the Text Field, click on the pencil icon and rename the Label to Instagram Handle or whatever you'd like. Make sure that the field is marked as Required so that you actually receive information from your customers.

6. For the Instagram Handle's Name field, rename the value to "handle".

7. For the Hidden Input, click on the pencil icon and rename the Name value to "email-address".

For the Value field, make sure that you enter: {{customer.email}}

It is extremely important to enter this so that your Gatsby contact gets created with the customer's email address.

8. Then, click on the Update button within the Form Builder.

9. Add Gatsby as your next step in your workflow.

10. Log into your Gatsby account > Integrations > Webhook > Create a new webhook. Click Save on the webhook default settings which should look like the below.

11. Click on the clipboard icon to the right of the URL. Paste the URL you copied into the Webhook URL field in MESA, in the Gatsby Create Contact Step.

12. Locate the Email and Instagram Handle fields and click on the {+} icon to use MESA's Token feature. Tokens are representations of data. Select the appropriate tokens for both Email and Instagram Handle.

13. Save your workflow and enable your workflow! Check this document out for best practices.

14. Next, we will add this Form to your Order Status page. Scroll up in your workflow and click the clipboard icon to copy the Form URL.

15. From your Shopify Admin, click Settings in the lower left-hand corner of your Shopify admin, and then click the Checkout icon.

16. In the Additional Scripts section, copy and paste the following snippet of code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <form id="mesa-form" class="container" style="display: none;" action="{{form_url}}" method="POST" name="mesa-form"> <div id="form-content"></div> <div class="form-group"> <div class="hcaptcha"></div> <!-- Remove this line to hide the captcha --> </div> <div id="error"></div> <div class="formbuilder-button form-group field-submit"> <button type="submit" class="btn-primary btn" name="submit" id="submit">Submit</button> </div> </div> </form> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/formBuilder@3.4.0/dist/form-render.min.js'></script> <script src="https://mymesa.site/forms/hcaptcha.js" async defer></script> <script> jQuery(document).ready(function($) { var $form = $('#mesa-form'); var mesaFormUrl = $('#mesa-form').prop('action') + '.json'; // Render the form from the fields configured in the Mesa Dashboard Form Builder with FormRender: // https://formbuilder.online/docs/formRender/options/ $.getJSON(mesaFormUrl, function(data) { jQuery('#form-content', $form).formRender({ formData: data }); // If this is a Shopify Checkout page, support auto-populating the customer-id field if (typeof Shopify !== 'undefined' && typeof Shopify.checkout !== 'undefined') { jQuery('#form-content input[name=customer-id]').val(Shopify.checkout.customer_id); } $form.fadeIn(); }); // Bind an AJAX POST call to the #submit button $('#submit', $form).bind('click', function(event) { event.preventDefault(); $(this).prop("disabled", true); // Post to the Mesa Forms JavaScript API url, which is: "{{form_url}}.json" // Mesa Forms will accept these Content-Types: `application/json`, `application/x-www-form-urlencoded` $.ajax({ type: "POST", url: mesaFormUrl, data: $form.serializeArray(), success: function() { $('#mesa-form').html('<div class="alert alert-success" role="alert">Thank you for your submission.</div>'); }, error: function(jqXHR) { console.log(jqXHR, status, error); $('#error').html('<div class="alert alert-danger" role="alert">Sorry, there was an error submitting your form: ' + jqXHR.responseJSON.error.message + '. Please try again.</div>'); $('#submit', $form).prop("disabled", false); } }).done }); }); </script>

16. Locate this line of code.

<form id="mesa-form" class="container" style="display: none;" action="{{form_url}}" method="POST" name="mesa-form">

17. Replace {{form_url}} in the <form> tag with your copied URL.

18. Save your changes and it should look like this now!

19. Follow this document to add a basic layout to your form.

20. That's it! Test your form by making a small purchase on your site, or doing a Test Order.

Also worth noting that these steps above are different and a bit more complex than adding a Klaviyo Form to that same Thank You page, but this process will allow you collect Instagram handles and sync the insights to their customer records without reasking for their email address.

Please let us or Mesa know if you have any questions! You can contact Mesa here.

Did this answer your question?