e-satisfaction

The #1 Humanized Marketing Platform

Integration Step 2: Checkout Stage

Follow

Use the following guidelines to integrate the Checkout Questionnaire in the Order Confirmation page of your website.

Note: Please make sure that you will first have to complete the Integration Step 1: Core Library

Step 2.1 - Define the questionnaire Position

Option 1: Add a new HTML element 

For the checkout stage questionnaires, you have to define in the checkout success page the placeholder where the questionnaire will reside, as a css selector. (eg. #esat_checkout_container)

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

You have to make sure that the element exists and it’s in the page before running the integration code.

Note: In case you created a different placeholder position than the suggested one #esat_checkout_container, you should complete the css selector you have created on your Dashboard, in the filed Position. 

Option 2: No access to the page HTML

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 element

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

 

 

Step 2.2 - Push metadata

Include the following script in your checkout page. Make sure that e-satisfaction library is loaded (integration - step 1).

Esat.updateMetadata("QUESTIONNAIRE_ID", {
   responder: {
       "email": "The customer email",
       "phone_number": "The customer phone number"

   },
   questionnaire: {
       "transaction_id": "The id of the order",
       "transaction_date": "The datetime 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.

Here's an example of the script:

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:

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.

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"

   }
});

Testing the checkout questionnaire

If the integration has been completed successfully, you should be able to see the embedded questionnaire in the container, upon completing the checkout success process, as shown in the following snapshot.

Troubleshooting

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

Next Steps

Check the flows to make sure the after sales questionnaire will be sent to the customers X days after the order. Learn more about flows here.

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

Comments