Help Center

Messaging Kanalen

Messaging Kanalen - Webwidget

Webwidget - Geavanceerde opties

Geavanceerde en technische opties om de widget te configureren (een widget insluiten, chatbots starten, data events...)

Hoofdpagina

Opnemen in je website

Voeg de volgende code toe aan het einde van het head-sectie van je pagina

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

Laden

Opnemen in je website

Het Livechat Widget script wordt bestuurd door het gebruik van data-attributen. De volgende data-attributen worden gebruikt in de onderstaande voorbeelden:

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

Methode1: statische script tag (aanbevolen)

Gewoonlijk voegen we Javascript toe aan een bestand door het direct in te sluiten in een HTML-bestand. Voeg de volgende code toe aan het einde van de head-sectie van je pagina.

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

Methode 2: dynamisch geladen script tag

In sommige gevallen wil je code laden (zelfs dynamisch gegenereerde) binnen JavaScript. Om de widget script tags naar de head van een document te schrijven, voeg je de volgende code toe aan het einde van de body sectie op je pagina.

<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>

Als je Google Tag Manager gebruikt (of een ander tag management systeem dat data-attributen verwijdert van ingesloten script elementen), zul je de dynamisch geladen variant moeten gebruiken. Bij gebruik van de eerste methode met GTM zal de widget niet werken.

Extra opties

Met behulp van het data-web1on1-options attribuut initialiseren we de widget zelf en kunnen we wat extra opties toevoegen. De widget op deze pagina is gemaakt met de volgende 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>

Een functie oproepen na het laden

Met het data-web1on1-callback attribuut kunnen we de naam van een globale functie opgeven die wordt opgeroepen zodra de widget zichzelf geïnitialiseerd heeft en op de pagina is geladen.

In het onderstaande voorbeeld sturen we Google Analytics-gegevens terug naar Web1on1. Door de GA client ID op te slaan in de gebruikerseigenschappen (met tracking-id), wordt deze naar Web1on1 gestuurd en toegevoegd aan andere contactgegevens.

<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>

Gebeurtenissen

De volgende gegevensattributen worden in de onderstaande voorbeelden gebruikt:

data-web1on1-appid (vereist)
data-web1on1-callback

De onderstaande scripts gaan ervan uit dat je het Google Tag Script al hebt geladen. Het script gebruikt de functie dataLayer om analysegegevens naar Google te sturen. Je moet het een andere naam geven als je de GTM-tag met een andere functienaam hebt geladen.

Voorbeeld: Abonneren op widgetgebeurtenissen (zonder GTM)

Het onderstaande voorbeeld gebruikt de functie web1on1.on om zich te abonneren op widgetgebeurtenissen en deze naar Google Analytics te pushen. De widgetLoaded functienaam voor het data-web1on1-callback attribuut wordt toegevoegd aan een statische script tag.

Open een nieuw tabblad, en open de console in uw browser met ctrl+shift+i om de gebeurtenissen in actie te zien. Het venster in het tabblad is gemaakt met de volgende 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>

Voorbeeld: Abonneren op widgetgebeurtenissen (met GTM)

Gebruik een dynamische scripttag wanneer u Google Tag Manager gebruikt. Het onderstaande voorbeeld gebruikt dezelfde callback als het vorige voorbeeld. Open in een nieuw tabblad, en inspecteer de bron en console.log; het venster in het tabblad is gemaakt met de volgende GTM-compatibele 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>

Volledig scherm en insluiten

De volgende gegevensattributen worden in de onderstaande voorbeelden gebruikt:

data-web1on1-embedded
data-web1on1-nosound

Voorbeeld 1: Widget insluiten in een pagina

Gebruik het data-web1on1-embedded attribuut om de widget conversatie in te sluiten. De ingesloten widget op deze pagina is gemaakt met de volgende 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>

Voorbeeld 2: Open widget op volledig scherm

Open de widget op volledig scherm in een nieuw tabblad. Het venster in het tabblad is gemaakt met de volgende 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>

Automatisch een bot starten

In de onderstaande voorbeelden wordt het volgende gegevenskenmerk gebruikt:

data-web1on1-bot

Voorbeeld 1: Start een bot wanneer de widget is geopened

Op deze pagina wordt een bot gestart wanneer de widget wordt geopend.

Probeer het eens, het gebruikt de volgende 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>

Dit werkt door te luisteren naar het widget:opened event, en een sendClientMessage API functie aan te roepen, om een bericht te versturen als het contact. Het bericht zelf is als volgt opgebouwd:

>cs BOTID COMMAND VARIABLE

Het voorvoegsel om bots te activeren is altijd '>cs'. Als alleen het bot-ID wordt opgegeven, wordt de chat aan de bot toegewezen. Indien een "commando" en optioneel een "variabele" worden opgegeven, worden deze geconstrueerd tot een vermelding aan de bot namens het contact.

Het script moet worden toegevoegd aan het einde van de html-body

Voorbeeld 2: Onmiddellijk een bot starten, met behulp van statische scripttags

Om de widget te laden en onmiddellijk een bot te starten, gebruik je het volgende HTML fragment:

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

Het script moet worden toegevoegd aan de kop van de html

Voorbeeld 3: Start onmiddellijk een bot met behulp van dynamische scripttags

Met 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>

Het script moet worden toegevoegd aan het einde van de html-body

Buttons

De volgende gegevensattributen worden in de onderstaande voorbeelden gebruikt:

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

Voorbeeld 1: Aan een bot toewijzen

Het toevoegen van het data-web1on1-bot attribuut aan elke willekeurige knop opent de widget en start de Testdrive bot. Deze neemt een bot-ID en wijst de chat toe aan de overeenkomstige bot.

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

Voorbeeld 2: Een bot vermelden

Sommige bots interpreteren bot-commando's, die naar de bot worden gestuurd, als een bericht van het vermeldingstype. De ChatScript bot voert bijvoorbeeld een scripted conversation ID uit als je deze meegeeft na het `start`-commando, zoals dit:

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

Voorbeeld 3: Widget openen bij klikken op Button

Gebruik de data-web1on1-opend om de widget te openen.

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

Voorbeeld 4: Widget openen bij klikken op link

Deze link opent alleen de widget en is gemaakt met de volgende code:

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

De data-web1on1-preventdefault="true" is toegevoegd om het volgen van de link te stoppen.

Hulp nodig?

Klik dan hier om support diensten te boeken bij één van onze Web1on1 Experts (Meer info: professional services)

➡ Volgende stap - Design en Opties