Introduction

In this article you can find how to integrate e-satisfaction.com on your Shopify store by using some existing Shopify add-ons and putting in some code.

Make sure you have read the basic Omnichannel Flow Integration Guide to be aware of the steps you need to do and the integration parameters.

Step by Step Video

You can watch our video:

Step 1: e-satisfaction Library & Browse Stage

The first step of the integration is to install the e-satisfaction library on the Spotify website. In the context of this guide, we are going to do this by installing an add-on to do the work for us.

The add-on used in this guide is just an example. Feel free to find other ways to install the code.

Install the add-on

Before we begin installing the e-satisfaction integration, we need to install a free add-on on our Shopify store. This add-on will help us install the main e-satisfaction integration library.

Visit the XO Insert Code add-on and click on the Add button:

And follow all the steps required by Shopify to install the add-on.

Enable the add-on

After installing the add-on, you should be redirected to the admin page of the add-on. From there, click on the turn-on button to activate it.

Add the integration library code found in the Web Integration guide. Copy the Library Code, selecting the case that suits your Shopify best (with or without jQuery) and replace YOUR-APPLICATION-ID with the application id that you are trying to integrate, found in the application settings in your e-satisfaction dashboard.

(the script has to be inserted in <script type="text/javascript"></script> tags):

Click save and visit your website. The browse questionnaire should appear on your website page directly.

Browse Display Type

You can select between box and box_classic for your questionnaire display type.

You can check the Push Metadata article on how to push custom values. You can use this script to push custom values for your visitors during their Browse stage.

Step 2: Checkout Stage

In this step you should be able to setup the Checkout Questionnaire to appear in the Order Confirmation Page of your website.

Shopify works differently and in this case, we have to re-enter the integration code in the checkout page since the add-on we used it not running on the checkout page.

Checkout Page

From your Shopify Admin Page go to Settings -> Checkout:

Find the Order Processing section:

Add integration library

Copy and paste the code from Step 1 and paste it into the above textarea.

Set Position HTML Container

Check that you have already read the section about the Checkout Stage on the Omnichannel Flow Integration Guide and understood the questionnaire position.

At the above textarea you can add the HTML container:

Example (#esat_checkout_container):

<div id="esat_checkout_container"></div>

NOTE: If you are using before or after position type, select the position from the Checkout Web Integration settings panel and move to the next section.

Push Metadata

Based on the Push Metadata guide, it's enough to add an extra script to push all the metadata you need at your checkout stage.

At the textarea add a script to push the metadata you need, including the transaction_id, email, transaction_date etc:

<script>
Esat.updateMetadata("CHECKOUT-QUESTIONNAIRE-ID", {
    responder: {
        "email": "{{ customer.email }}",
        "phone_number": "{{ customer.phone }}"
    },
    questionnaire: {
        "transaction_id": "{{ checkout.order_id }}",
        "transaction_date": '{{ "now" | date: "%B %d, %Y %I:%M %p %Z" }}',
        "store_pickup": true // true for store pickup, false for home delivery
    }
});
</script>

Read more on Shopify Liquid Objects and how to get the variables you need.

NOTE: The store_pickup metadata depends on your implementation. Feel free to adjust its value to your needs.

You can push more metadata by simply adding them in the suitable list above like the following example:

Esat.updateMetadata("CHECKOUT-QUESTIONNAIRE-ID", {
    responder: {
        "email": "{{ customer.email }}",
        "phone_number": "{{ customer.phone }}"
        "EXTRA_METADATA_1": "METADATA_VALUE_1"
    },
    questionnaire: {
        "transaction_id": "{{ checkout.order_id }}",
        "transaction_date": '{{ "now" | date: "%B %d, %Y %I:%M %p %Z" }}',
        "store_pickup": true // true for store pickup, false for home delivery,
        "EXTRA_METADATA_2": "METADATA_VALUE_2"
    }
});

NOTE: You will have first to create your application metadata through your dashboard, in the section Application Metadata, and then use them during the integration process.

Step 2.3: Testing the Checkout Questionnaire

If the integration has been completed successfully, you should be able to see the embedded questionnaire in the container, on your order confirmation page, as shown in the following snapshot:

You can also see above that the metadata have all the desired values.

Step 3: After Delivery - Store Pickup Stage

This step is exactly the same for all Omnichannel Flow Integrations and you should read Step 3 from that guide.

Troubleshooting

If the questionnaire is not displayed please follow our troubleshooting guide here.