Your organization
Livechat Widget
Widget Events
The following data attributes are used in the examples below:
- data-web1on1-appid (required)
- data-web1on1-callback
The scripts below assume you have already loaded the Google Tag Script. The script uses the dataLayer function to send analytics data to Google. You will have to name it differently if you have loaded the GTM tag with a different function name.
Example: Subscribing to widget events (without GTM)
The example below uses the web1on1.on function to subscribe to widget events, and push them to Google Analytics. The widgetLoaded function name for the data-web1on1-callback attribute is added to a static script tag.
Open in a new tab, and open the console in your browser using ctrl-shift-i to see the events in action. The window in the tab was created with the following code:<script>
window.widgetLoaded = function() {
console.log('widget is loaded and has ' + window.web1on1.getConversation().messages.length + ' messages');
if (dataLayer) dataLayer.push({ event: 'widget loaded'});
window.web1on1.on('widget:opened', function() {
console.log('widget:opened: you could send statistics here')
if (dataLayer) dataLayer.push({ event: 'widget opened'});
});
window.web1on1.on('widget:closed', function() {
console.log('widget:closed: you could send statistics here')
if (dataLayer) dataLayer.push({ event: 'widget closed'});
});
window.web1on1.on('message:sent', function(message) {
console.log('message:sent: you could send statistics here', window.web1on1.getConversation().messages.length)
if (dataLayer) dataLayer.push({ event: 'contact send message'});
});
window.web1on1.on('message:received', function(message) {
console.log('message:received: you could send statistics here')
if (dataLayer) dataLayer.push({ event: 'contact received message'});
});
}
</script>
<script defer
src="https://cdn.web1on1.chat/widget/bundle.min.js"
data-web1on1-appid="index.html"
data-web1on1-callback="widgetLoaded" data-web1on1-options='widgetOptions'>
</script>Example: Subscribing to widget events (with GTM)
Use a dynamic script tag when using Google Tag Manager. The example below uses the same callback as the previous example. Open in a new tab, and inspect the source and console.log; the window in the tab was created with the following GTM-compatible code:
<script>
(function(w, d) {
w.widgetLoaded = function() {
console.log('widget is loaded and has ' + w.web1on1.getConversation().messages.length + ' messages');
if (dataLayer) dataLayer.push({ event: 'widget loaded'});
if (dataLayer && !w.web1on1.api.getCookie('widget_was_opened')) {
dataLayer.push({ event: 'widget opened'});
w.web1on1.api.setCookie('widget_was_opened', true)
//w.web1on1.api.eraseCookie('widget_was_opened')
}
w.web1on1.on('widget:closed', function() {
console.log('widget:closed: you could send statistics here')
if (dataLayer) dataLayer.push({ event: 'widget closed'});
});
w.web1on1.on('message:sent', function(message) {
console.log('message:sent: you could send statistics here', w.web1on1.getConversation().messages.length)
if (dataLayer) dataLayer.push({ event: 'contact send message'});
});
w.web1on1.on('message:received', function(message) {
console.log('message:received: you could send statistics here')
if (dataLayer) dataLayer.push({ event: 'contact received message'});
});
}
var el = d.createElement('script');
el.setAttribute('src', 'https://cdn.web1on1.chat/widget/bundle.min.js');
el.setAttribute('defer', '');
el.setAttribute('data-web1on1-appid', 'index.html');
el.setAttribute('data-web1on1-callback', 'widgetLoaded');
d.getElementsByTagName('head')[0].appendChild(el);
})(window, document);
</script>