Getting Started

You can fully configure your web display settings from your dashboard, separately for each questionnaire.

However, there are cases where you might want to override these settings, on demand for different pages of your website. These cases might be the following:

• Different language of the questionnaire if you have a multilingual website
• Alternate the delay cap based on the user behavior
• Disable (or enable) mobile mode on specific pages 

All the examples in this article assume that your website DOES NOT have jQuery installed.

🚨 Warning 🚨

Overriding the display settings will remove the flexibility of your questionnaires and you will no longer be able to affect their display from the dashboard. If you are sure about this, you can move on with your overrides.

Override Web Display Settings

We have explained, in a previous article, the full Web Installation of e-satisfaction questionnaires to your website.

You can override any of the following settings, per questionnaire:

You can read more about the Web Display Settings.

Javascript Code

Display settings should be set before displaying any questionnaire.

You can override the display settings by pushing the extra values, per questionnaire, to the installation script as follows:

(function (w, d, id, c) {
    // Define e-satisfaction collection configuration
    w.esat_config = {application_id: id, collection: c || {}};

    // Update metadata
    w.Esat = w.Esat || {};
    w.Esat.updateMetadata = function (q, m) {
        w.esat_config.collection[q] = w.esat_config.collection[q] || {};
        w.esat_config.collection[q].metadata = m;
    };

    // Setup script
    var l = function () {
        var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
        s.async = true;
        s.src = 'https://collection.e-satisfaction.com/dist/js/integration' + (!!w.jQuery ? '' : '.jq') + '.min.js';
        r.parentNode.insertBefore(s, r);
    };

    // Attach script or run script if document is loaded
    "complete" === d.readyState ? l() : (w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, false));
})(window, document, 'YOUR-APPLICATION-ID', {
    "YOUR-QUESTIONNAIRE-ID": {
        "questionnaire_id": "YOUR-QUESTIONNAIRE-ID",
        "active": true,
        "active_mobile": true,
        "type": "embed",
        "position": "#collection-holder",
        "position_type": "inside",
        "locale": "",
        "locale_autodetect": true,
        "delay_cap_minutes": 0,
        "delay_cap_hours": 0,
        "delay_cap_days": 0,
        "frequency_cap_minutes": 0,
        "frequency_cap_hours": 0,
        "frequency_cap_days": 0
    }
});

You should extend the above settings for each questionnaire separately, by adding the proper value to YOUR-QUESTIONNAIRE-ID.

Important: You should include the questionnaire_id option in all settings.

Example Use Case: Override Questionnaire Language

The most common override that is used is the language setting.

To be able to set the questionnaire language on demand based on your page/user or any other condition. You should also disable locale_autodetect to enforce your language. For example, to set the language to Spanish (es), you can follow this example:

(function (w, d, id, c) {
    // Define e-satisfaction collection configuration
    w.esat_config = {application_id: id, collection: c || {}};

    // Update metadata
    w.Esat = w.Esat || {};
    w.Esat.updateMetadata = function (q, m) {
        w.esat_config.collection[q] = w.esat_config.collection[q] || {};
        w.esat_config.collection[q].metadata = m;
    };

    // Setup script
    var l = function () {
        var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
        s.async = true;
        s.src = 'https://collection.e-satisfaction.com/dist/js/integration' + (!!w.jQuery ? '' : '.jq') + '.min.js';
        r.parentNode.insertBefore(s, r);
    };

    // Attach script or run script if document is loaded
    "complete" === d.readyState ? l() : (w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, false));
})(window, document, 'YOUR-APPLICATION-ID', {
    "YOUR-QUESTIONNAIRE-ID": {
        "questionnaire_id": "YOUR-QUESTIONNAIRE-ID",
        "locale": "es",
        "locale_autodetect": false
    }
});

Override Whitelist and Blacklist

Overriding whitelist and blacklist settings is not included in this article on purpose. Whitelist and Blacklist settings are being checked twice, on both Frontend and Backend side.

Changing the Frontend side and removing any whitelist will not work as the questionnaire will be checked on the Backend, thus no questionnaire will be displayed.

We do not recommend overriding whitelist or blacklist settings.