Instant Feedback

By asking customers for feedback about their shopping experience immediately after their order is placed, you’re catching them at their happiest moment.

Survey Customization

First, we’ll customize the survey to the look and feel of your site. This will include adding your business logo, updating the star and button colors to match your color scheme, determining how we’ll trigger the follow up email review request and whether you want to send a follow up request to all customers or only those who opt-in. To adjust the time delay on the follow up email request that will be sent after fulfillment, please update your Review Request Settings.

Code Installation

Then, in order to receive instant feedback from your customers, you will need to add the Instant Feedback survey code to the page that is shown immediately after an order is completed (i.e. the order confirmation page). You’ll need to swap out our %placeholders% with the actual variables your system uses for the values contained within the percent signs.

Without Products

On order confirmation page, without product information. Below is an example only:

<div class="stjr-instant-feedback"></div>
<script>
   document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded", function () {
        STJR.setConfig({
            language: 'en',
            user: {
                first_name: '%FIRST_NAME%',
                last_name: '%LAST_NAME%',
                email: '%EMAIL%',
                phone: '%PHONE%'
            },
            order_date: '%ORDER_DATE%',
            order_id: '%ORDER_ID%'
        })
    });
</script>

With Products

On order confirmation page, with product information. Below is an example only:

<div class="stjr-instant-feedback"></div>
<script>
    document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded", function () {
        STJR.setConfig({
            language: 'en',
            user: {
                first_name: '%FIRST_NAME%',
                last_name: '%LAST_NAME%',
                email: '%EMAIL%',
                phone: '%PHONE%'
            },
            products: [{
                brand: '%BRAND%',
                categories: '%CATEGORIES%',
                currency: '%CURRENCY%',
                images: '%IMAGE_URL%',
                price: '%PRICE%',
                product_link: '%LINK%',
                sku: '%SKU%',
                item_group: '%ITEM_GROUP%',
                title: '%TITLE%',
            }, ],
            order_date: '%ORDER_DATE%',
            order_id: '%ORDER_ID%'
        })
    });
</script>

You will also need to add the Script Loader snippet below. The script loader can be added anywhere on the page but we recommend that the script tag be added in the footer area of the site and only one instance to avoid performance lags and to comply with recommendations by performance audit tools like Google’s PageSpeed Insights.

Below is an example only:

<script>
    (function (d, s, id, c) {
        var js, rC = [], uRC = [], r = 0;
        Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(r => {
            rC = [...rC, ...Array.from(r.classList).filter((cl) => {
                return /^stjr-/.test(cl);
            })]
        });
        uRC = [...new Set(rC)];
        t = d.getElementsByTagName(s)[0];
        js = d.createElement(s);
        js.id = id;
        js.src = 'ttps://www.sitejabber.com/js/v2/{ClientID}/widgets.js' + (uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base') + '';
        js.onload = js.onreadystatechange = function () {
            if (!r && (!this.readyState || this.readyState[0] == 'c')) {
                r = 1;
                c();
            }
        };
        t.parentNode.insertBefore(js, t);
    }(document, 'script', 'sj-widget', function () {}));
</script>

Customizing Widget Behavior

You can add customization to the widget regarding how often you’d like it to be shown and whom it is shown to.

Example: If you would only like to show our Instant Feedback to half of your customers, you can add the following to beginning of the code snippet.

{% if order_number_last_digit < 5 %}

Survey Example

Please note that phone numbers should be passed in E.164 format. Example: [+][country code][subscriber number including area code]

Dates should be passed in MM/DD/YYYY or DD-MM-YYYY format

Was this article helpful?

Related Articles