Search results for "{{ search.query }}"

No results found for "{{search.query}}". 
View All Results

Integration

Integration code

After creating an account, copy and paste the below code snippet in your web pages - preferably in the header. You'll also get the integration snippet in the dashboard.

<script id="_webengage_script_tag" type="text/javascript">
    var webengage; !function(w,e,b,n,g){function o(e,t){e[t[t.length-1]]=function(){r.__queue.push([t.join("."),arguments])}}var i,s,r=w[b],z=" ",l="init options track screen onReady".split(z),a="feedback survey notification".split(z),c="options render clear abort".split(z),p="Open Close Submit Complete View Click".split(z),u="identify login logout setAttribute".split(z);if(!r||!r.__v){for(w[b]=r={__queue:[],__v:"6.0",user:{}},i=0;i<l.length;i++)o(r,[l[i]]);for(i=0;i<a.length;i++){for(r[a[i]]={},s=0;s<c.length;s++)o(r[a[i]],[a[i],c[s]]);for(s=0;s<p.length;s++)o(r[a[i]],[a[i],"on"+p[s]])}for(i=0;i<u.length;i++)o(r.user,["user",u[i]]);setTimeout(function(){var f=e.createElement("script"),d=e.getElementById("_webengage_script_tag");f.type="text/javascript",f.async=!0,f.src=("https:"==e.location.protocol?"https://ssl.widgets.webengage.com":"http://cdn.widgets.webengage.com")+"/js/webengage-min-v-6.0.js",d.parentNode.insertBefore(f,d)})}}(window,document,"webengage");

    webengage.init('_YOUR_LICENSE_CODE_');
</script>

When you paste, replace _YOUR_LICENSE_CODE_ with your account's license code. You can find your license code in Account Setup section of your WebEngage dashboard (as highlighted in the image below)

This integration bit is a one time activity and any customizations done inside your WebEngage dashboard (w.r.t. feedback, surveys or notifications, web push notifications) doesn't need any further code changes on your site.

This code loads and initializes WebEngage SDK asynchronously, so that it does not block loading of your web page. This is cautiously done to not impact page load time on your website.
During initialisation, our code waits for DOMContentLoaded event before modifying the DOM for loading further resources, ensuring it doesn't delay readiness of the DOM.

Note the script URLs in the integration code are protocol relative. All our resources are loaded over the same protocol (HTTP or HTTPS) as the containing page, which prevents "Insecure Content" warnings.

API

After the integration snippet is placed on your web pages, you can use the following API to configure our Web SDK to suit your needs.

webengage.init

webengage.init method initialises Web SDK on being provided a valid account licenseCode.

webengage.init(licenseCode);

This is already a part of the default integration code.

webengage.options

All configurations at the global level can be set with webengage.options method.

Global (widget) configuration properties

Property
Type
Description
Default

language

String

Static messages present in your feedback/survey form will appear in the language specified here
Should be set only at the init time, changing this property later will have no effect

As per settings in the dashboard

delay

Number

Delays SDK initialization for the time specified (in miliseconds)
Should be set only at the init time, changing this property later will have no effect

0

defaultRender

Number

If set to false, then by default on initialization, none of the products (feedback, survey and notificaton) are enabled and do not appear. To stop rendering selective products, set the defaultRender option at the respective product level eg. webengage.survey.options('defaultRender', false)

true

customData

Object

DEPRECATED Use webengage.screen instead. Specify your custom data here in proper JSON format to submit along with every survey / feedback submission and notification click

null

ruleData

Object

DEPRECATED Use webengage.screen instead. Specify your rule data here in proper JSON format. The keys should match with the values used in Targeting rules section for the corresponding survey or notification

null

tokens

Object

DEPRECATED Use webengage.screen instead. Specify your tokens data here in proper JSON format

null

Examples of setting global configuration properties

Load WebEngage after 5 seconds
webengage.options('delay', 5000);
Hide WebEngage by default on mobile and tablets
var isMobile = {
    Android: function() {
            return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if (isMobile.any()) {
    webengage.options('defaultRender', false);
}

webengage.onReady

Any code that you want to run after WebEngage is loaded and initialized should be provided as a callback to webengage.onReady

Example - show a survey on click of a button instead of default rendering
// default rendering is disabled
webengage.survey.options('defaultRender', false);
webengage.onReady(function(){
    document.getElementById('_BUTTON_ID_').onclick = function () {
        webengage.survey.render();
    };
});

webengage.reload

In single page applications (SPA) the page does not really load often, instead a page view change is mimicked either using history.pushState() or hash change. Each of these SPA view changes should be ideally thought of as different page views and tracked likewise.

WebEngage automatically initializes and tracks page view on full page loads but not on in-page SPA view changes. It needs to be informed (via webengage.reload()) of such view changes.

Example - reinitialize WebEngage on SPA view changes (assuming SPA has implemented 'hash change' view changes)
function reload () {
    webengage.onReady(function() {
        webengage.reload();
    });
}

if (window.attachEvent) {
    window.attachEvent('onhashchange', function() {
        reload();
    });
} else if (window.addEventListener) {
    window.addEventListener('hashchange', function() {
        reload();
    });
}

webengage.screen

Use the screen method to pass any contextual information on the current page. Both of its two arguments page/screen name and an object of properties data are optional.
This data

  • will be recorded with the submission of a survey or feedback or click activation of a notification
  • can be used in targeting rules
  • can contain personalised values for placeholders (called tokens) in notifications
webengage.screen([name], [data])
Example - pass your own business data for inclusion in survey reports
webengage.screen('Dassler Premium Ice-cream', { 'currentProductId' : '2947APW09', 'price' : 210, 'isDiscounted' : false });

Tracking and Analytics data collection

These are methods for you to send data across to WebEngage. You can associate attributes to an anonymous or identified user, notify about interesting application/business events and set contextual information for the current page.

WebEngage uses all this data to build rich user profiles, segment users and provide powerful targeting capabilities.

  • All user methods are explained in detail in User
  • Tracking events is covered in Events
  • The screen method as described in the section above

Integration