Help Center

Messaging Channels

Messaging Channels - Webwidget (Live Chat)

Webwidget - Advanced options

Advanced and technical options available to configure the widget (embedding a widget, start chatbots, data events...)

Main

Include in your website

Add the following code towards the end of the head section on your page

<script defer src="https://cdn.web1on1.chat/widget/bundle.min.js" 
  data-web1on1-appid="5f181d8a844411000c3891a8">
</script>

Loading

Include in your website

The Livechat Widget script is controlled through the use of data attributes. The following data attributes are used in the examples below:

data-web1on1-appid (required)
data-web1on1-options
data-web1on1-callback

Method 1: static script tag (recommended)

We usually add some Javascript to a file by embedding it directly into a HTML file. Add the following code towards the end of the head section on your page.

<script defer src="https://cdn.web1on1.chat/widget/bundle.min.js"
    data-web1on1-appid="5f181d8a844411000c3891a8">
</script>

Method 2: dynamically loaded script tag

In some cases, you may want to load (even dynamically generated) code within javascript. To write the widget script tags to the head of a document, add the following code at the end of the body section on your page.

<script>
(function(d) {
    var el = d.createElement('script');
    el.setAttribute('src', 'https://cdn.web1on1.chat/widget/bundle.min.js');
    el.setAttribute('defer', '');
    el.setAttribute('data-web1on1-appid', '5f181d8a844411000c3891a8');
    d.getElementsByTagName('head')[0].appendChild(el);
})(document);
</script>

If you're using Google Tag Manager (or any other tag management system that removes data attributes from embedded script elements), you will have to use the dynamically loaded variant. When using the first method with GTM, the widget will not work.

Passing extra options

Using the data-web1on1-options attribute, we initialize the widget ourselves and can add some extra options. The widget on this page was created with the following code:

<script>
    window.widgetOptions = {
        displayStyle: 'bar',
        shoutout: null
    }
</script>
<script defer
    src="https://cdn.web1on1.chat/widget/bundle.min.js"
    data-web1on1-appid="5f181d8a844411000c3891a8"
    data-web1on1-options='widgetOptions'>
</script>

Call a function after loading

Using the data-web1on1-callback attribute, we can provide the name of a global function that is called as soon as the widget has initialized itself and is loaded on the page.

In the example below, we send Google Analytics data back to Web1on1. By storing the GA client ID in the user properties (keyed by tracking ID), it will be send to Web1on1 and added to other contact data.

<script>
    (function(w, d) {
        w.widgetLoaded = function() {
            // Sent Google Analitics code to Web1on1 Contact profile.
            var properties = {};
            if (window.ga && window.ga.getAll) {
              var trackers = window.ga.getAll();
              for (var i = 0, len = trackers.length; i < len; i += 1) {
                properties[trackers[1].get('trackingId')] = trackers[1].get('clientId');
              }
            }
            window.web1on1.updateUser({ properties });
        }
        var el = d.createElement('script');
        el.setAttribute('src', 'https://cdn.web1on1.chat/widget/bundle.min.js');
        el.setAttribute('defer', '');
        el.setAttribute('data-web1on1-appid', '5f181d8a844411000c3891a8');
        el.setAttribute('data-web1on1-callback', 'widgetLoaded');
        d.getElementsByTagName('head')[0].appendChild(el);
    })(window, document);
</script>

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="5f181d8a844411000c3891a8"
    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', '5f181d8a844411000c3891a8');
        el.setAttribute('data-web1on1-callback', 'widgetLoaded');
        d.getElementsByTagName('head')[0].appendChild(el);
    })(window, document);
</script>

Fullscreen and Embedding

The following data attributes are used in the examples below:

data-web1on1-embedded
data-web1on1-nosound

Example 1: Embed widget in a page

Use the data-web1on1-embedded attribute to embed the widget conversation. The embedded widget in this page was created with the following code:

<!doctype html>
<html>
    <head>
        <title>embedded</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script
            defer
            src="https://cdn.web1on1.chat/widget/bundle.min.js"
            data-web1on1-appid="5f181d8a844411000c3891a8"
            data-web1on1-embedded="embedWidget"
            data-web1on1-nosound="true"></script>
        <style>
          #embedWidget {
            position: absolute;
            top: 400px;
            left: 65%;
            width: 30%;
            height: 400px;
            border:1px solid black;
          }
        </style>
    </head>
    <body>
      <div id="embedWidget"></div>
    </body>
</html>

Example 2: Open widget fullscreen

Open the widget fullscreen in a new tab. The window in the tab was created with the following code:

<!doctype html>
<html>
    <head>
        <title>fullscreen</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script
            defer
            src="https://cdn.web1on1.chat/widget/bundle.min.js"
            data-web1on1-appid="5f181d8a844411000c3891a8"
            data-web1on1-embedded="fullscreen"
            data-web1on1-bot="6248f0083ab5d5001e523146"
            data-web1on1-nosound="true"></script>
        <style>
        <style>
          #fullscreen {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
          }
        </style>
    </head>
    <body>
      <div id="fullscreen"></div>
    </body>
</html>

Autostart a bot

The following data attribute is used in the examples below:

data-web1on1-bot

Example 1: Start a bot when the widget is opened

On this page, a bot is started when the widget is opened.

Try it out, it uses the following code:

<script>
  (function() {
    window.loaded = function () {
      window.web1on1.on('widget:opened', function() {
        console.log('widget:opened: start a bot, script 624e0c244be4c2f9db262000')
        web1on1.api.sendClientMessage('>cs 6248f0083ab5d5001e523146 start 624e0c244be4c2f9db262000');
      });
    }
    var el = document.createElement('script');
    el.setAttribute('src', 'https://cdn.web1on1.chat/widget/bundle.min.js');
    el.setAttribute('defer', '');
    el.setAttribute('data-web1on1-appid', '5f181d8a844411000c3891a8');
    el.setAttribute('data-web1on1-callback', 'loaded');
    document.body.appendChild(el);
  })();
</script>

This works by listening to the widget:opened event, and making a sendClientMessage API function call, to send a message as the contact. The message itself is constructed like this:

>cs BOTID COMMAND VARIABLE

The prefix to trigger bots is always '>cs'. With only the bot ID specified, the chat will be assigned to the bot. If a 'command' and optionally a 'variable' are provided, these will be constructed into a mention to the bot on behalf of the contact.

The script should be added at the end of the html body

Example 2: Start a bot immediately, using static script tags

To load the widget and start a bot immediately, use the following html snippet

<script defer src="https://cdn.web1on1.chat/widget/bundle.min.js"
      data-web1on1-appid="5f181d8a844411000c3891a8"
      data-web1on1-bot="6248f0083ab5d5001e523146"></script>

The script should be added to the head of the html

Example 3: Start a bot immediately, using dynamic script tags

With GTM (Google Tag Manager)

<script>
    (function(d) {
        var el = d.createElement('script');
        el.setAttribute('src', 'https://cdn.web1on1.chat/widget/bundle.min.js');
        el.setAttribute('data-web1on1-appid', '5f181d8a844411000c3891a8');
        el.setAttribute('data-web1on1-bot', '6248f0083ab5d5001e523146');
        d.getElementsByTagName('head')[0].appendChild(el);
    })(document);
</script>

The script should be added at the end of the html body

Buttons

The following data attributes are used in the examples below:

data-web1on1-open
data-web1on1-preventdefault
data-web1on1-bot

Example 1: Assign to a bot

Adding the data-web1on1-bot attribute to any button will open the widget and start the Testdrive bot. It takes a bot ID, and assigns the chat to the corresponding bot.

<button data-web1on1-bot="6081529153542604f56acb05">Book a test drive</button>

Example 2: Mention a bot

Some bots interpret bot commands, sent to the bot as a mention type message. For example, the ChatScript bot runs a scripted conversation ID if you provide it after the `start` command, like this:

    <button data-web1on1-bot="6248f0083ab5d5001e523146 start 626ed838809b981773134000">viaBOVAG bot</button>
    <button data-web1on1-bot="6248f0083ab5d5001e523146 start 624e0c244be4c2f9db262000">MB eVans bot</button>

Example 3: Open widget on button click

Use the data-web1on1-open to just open the widget.

<button data-web1on1-open="">Open the widget</button>

Example 4: Open widget on link click

This link will just open the widget and was created with the following code:

<a href="index.html" data-web1on1-open="" data-web1on1-preventdefault="true">This link</a>

The data-web1on1-preventdefault="true" is added to stop following the link

Need additional help?
Click here to book support the shop and summon Web1on1 Experts (more info about professional services)

➡ Next - Web1on1 Design and Options listing