e-satisfaction

The #1 Humanized Marketing Platform

Omnichannel Installation Script

Follow

Introduction

This article will guide you through the installation process of e-satisfaction for your Omnichannel Application.

It includes the setup of Browse, Checkout and After Delivery / Store Pickup questionnaires.

Omnichannel Plugins

Before moving on to the next steps, you might want to check all our Omnichannel Plugins to see if the platform you use is covered.

IMPORTANT: Before you Start

Before reading further this guide, make sure that you have followed the Web Installation guide and installed all the necessary Javascript code in your website.

Step 1: Browse Stage

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. Example:

Esat.updateMetadata("BROWSE-QUESTIONNAIRE-ID", {
   responder: {
       "guest": true // true for guest, false for registered user
       "phone_number": "The user's phone number"

   },
   questionnaire: {
       "position": "The position of the questionnaire, if A/B testing enabled"
   }
});

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.

Step 2.1: Define the Questionnaire Position

Option 1: Add a new HTML container

If you have access to your website's code, you can define the exact position of the questionnaire by inserting a custom html container.

NOTE: If you don't have access to the website's code, skip to Option 2.

You can define in the order confirmation page the html container where the questionnaire will reside, as a css selector.

Example (#esat_checkout_questionnaire_container):

<div id="esat_checkout_questionnaire_container"></div>

Once the above container is present in the page, the questionnaire will be displayed inside.

To avoid displaying the checkout questionnaire in different pages, you can either set a unique css selector or setup the whitelist options in the Web Display Settings.

Option 2: Without HTML container

If you do not have access to the page HTML (cannot modify HTML by adding elements), you are able to work around this by using the dashboard settings to define a relative position and choosing before or after in the position type.

Before: display the questionnaire exactly before the defined position, using an auto-created container.

After: display the questionnaire exactly after the defined position, using an auto-created container:

Step 2.2: Push Metadata

On your order confirmation page you can push all the metadata that you need for your end-user. Simply include in the page the following code:

Esat.updateMetadata("CHECKOUT-QUESTIONNAIRE-ID", {
   responder: {
       "email": "The customer email",
       "phone_number": "The customer phone number"

   },
   questionnaire: {
       "transaction_id": "The id of the order",
       "transaction_date": "The date-time the order was submitted",
       "store_pickup": true // true for store pickup, false for home delivery

   }
});

If there is not the option of store pick up for your orders, then the store pickup variable should always have the value false.

Example:

Esat.updateMetadata("Jf327y8zfsafgjk246sZfQ", {
   responder: {
       "email": "john@doe.com",
       "phone_number": "0030693123456781"

   },
   questionnaire: {
       "transaction_id": "G32528352",
       "transaction_date": "2019-02-25 15:20:32",
       "store_pickup": true

   }
});

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

Esat.updateMetadata("Jf327y8zfsafgjk246sZfQ", {
   responder: {
       "email": "john@doe.com",
       "phone_number": "0030693123456781",
       "EXTRA_METADATA_1": "METADATA_VALUE_1"

   },
   questionnaire: {
       "transaction_id": "G32528352",
       "transaction_date": "2019-02-25 15:20:32",
       "store_pickup": true,
       "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 installation process.

Step 2.3: Testing the Checkout Questionnaire

If the installation 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:

Step 3: After Delivery - Store Pickup Stage

Part of the Omnichannel Flow installation is an asynchronous messaging process of sending a questionnaire to the user after the delivery or the store pickup of the order.

This process will create queue items which will be sent via email or SMS (depending on your Pipeline Settings) without the need of a manual import of a list of emails or phone numbers.

NOTE: If you have chosen to skip the Questionnaire Flows for this Application, you can disregard the next sections.

Option 1: Default Automatic Flows

In the case of an Omnichannel Application, your application has by default two questionnaire flows:

  • Checkout Questionnaire -> After Sales Questionnaire
  • Checkout Questionnaire -> Store Pick Up Questionnaire

In this way, when a checkout questionnaire is displayed to a customer then automatically this customer is added to after sales or store pick up pipeline queue regarding the shipping method. 

NOTE: The queue item will be created regardless of the end-user answering the checkout questionnaire or not. The condition here is just to submit an order!

To view the questionnaire flows, you need to Log in your dashboard and go to Application Settings:

mceclip0.png

Option 2: Custom Flows with API - e-satisfaction Queue

There are cases where there is no default behavior for your order process and different flows should be setup per case.

In this case, you can build your own API calls towards e-satisfaction API and send your After Sales or Store Pickup Questionnaires to your customers when you think it's best.

Step 1: Disable your Application Flows

Visit your e-satisfaction dashboard and disable Questionnaire Flows.

Step 2: Make the API call

Before going forward, take a look on How to read our API guide.

Based on the desired questionnaire, select the questionnaire id, pipeline id and create a Queue Item.

Option 3: Custom Flows with API - Custom Queue

Although Option 2 can be very generic and work for most of the cases, if you have difficulties sharing the customer's personal data with e-satisfaction, you can build your own queue and send the After Sales or Store Pickup Questionnaires from your service.

NOTE: You should implement your own queue mechanism, and it's not covered in this article.

Step 1: Disable your Application Flows

Visit your e-satisfaction dashboard and disable Questionnaire Flows.

Step 2: Make the API call

Before going forward, take a look on How to read our API guide.

In this case, you have to create your own Questionnaire Instance and send the collection_url to your customers via email or SMS.

NOTE: For SMS channels, you can use the collection_url_short which makes use of a shortener service to keep the url short.

Based on the desired questionnaire, select the questionnaire id and create a Questionnaire Instance.

Troubleshooting

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

Was this article helpful?
0 out of 0 found this helpful

Have more questions? Submit a request