Création du projet web

Avant toute chose, il vous faut créer un projet Web. Pour cela :

  1. Cliquez en haut √† droite de l'interface de votre chatbot sur le bouton Activer. ¬†La liste de vos sites web va alors appara√ģtre. Pour le moment, cette liste est vide.
  2. Cliquez ensuite sur le bouton Ajouter un site web.
  3. Dans la fen√™tre qui appara√ģt, vous devez renseigner :

Nom du site web : Renseignez un nom assez explicite pour que vous retrouviez facilement votre site web dans la liste.

Url du site web : Renseignez l'adresse complète de votre site web. Par exemple http://monsiteweb.com. Ce champ est important car votre chatbot ne fonctionnera que sur cette adresse.
N.B : Si votre site est accessible en http ET en https, ne vous inquiétez pas, le chatbot fonctionnera sur les deux adresses.

Autoriser les sous-domaines (option facultative) : Vous pouvez activer cette option si vous souhaitez que votre chatbot soit accessible sur plusieurs sous domaines.
Par exemple, si votre site est accessible aux adresses http://monsiteweb.com et http://www.monsiteweb.com vous devrez renseigner http://monsiteweb.com dans le champ Nom du site web et cocher la case Autoriser les sous-domaines.

Validez enfin le formulaire en cliquant sur le bouton Créer et activer le bot.

N.B : Vous pourrez √† tout moment modifier ces champs en cliquant sur l'ic√īne "engrenage" dans la liste de vos projets web.

Intégration du code javascript sur votre site web

Si vous utilisez un site wordpress, vous pouvez vous référer à cette documentation.

Dans la fenêtre de configuration de votre site web, récupérez le code javascript à intégrer :

Copiez ce code en fin de balise <body> sur votre site web.

<script type="text/javascript">
window.chatboxSettings = {
appKey: 'XXXXXXXX',
websiteId: 'XXXXXX',
language: 'fr',
// Component behaviour
// autoStart: true | false // Open and start automatically the conversation (default : false)
// User datas
// userId: 'UNIQUE USER ID',
// firstName: 'USER FIRSTNAME',
// lastName: 'USER LASTNAME',
// gender: 'M | F',
// You can specify a target sequence here :
// ref: '<sequence id> OR "restart" to restart the welcome sequence',
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = 'https://cbassets.botnation.ai/js/widget.js';
js.async = true;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'chatbox-jssdk'));
</script>

La configuration du plugin se fait dans l'objet window.chatboxSettings. Voici la liste des paramètres disponibles : 

Paramètres obligatoires (ne pas modifier)

  • appKey (obligatoire) : Ne pas modifier la valeur qui est fix√©e dans le code √† int√©grer.
  • websiteId (obligatoire) : Ne pas modifier la valeur qui est fix√©e dans le code √† int√©grer.

Paramètres de personnalisation du visiteur de votre site

  • language : Le code langue (sur 2 caract√®res).
  • userId : Un identifiant unique de l'utilisateur de votre site web. Si le visiteur revient plus tard sur votre site, il retrouvera la conversation qu'il a eu avec le chatbot et toutes les variables associ√©es. Cette valeur pourra √™tre utilis√©e dans le chatbot via la variable {{USERID}}.
  • firstName : Le pr√©nom du visiteur. Cette valeur pourra √™tre utilis√©e dans le chatbot via la variable {{FIRSTNAME}}.
  • lastName : Le nom de famille du visiteur. Cette valeur pourra √™tre utilis√©e dans le chatbot via la variable {{LASTNAME}}.
  • gender : Le sexe (genre) du visiteur (valeurs possibles : 'M' ou 'F'). Cette valeur pourra √™tre utilis√©e dans le chatbot via la variable {{GENDER}}.
  • externalDatas: Un objet contenant des variables personnalis√©es. Vous pourrez retrouver ces variables dans le chatbot via les variables externes.
externalDatas: {
   maVariable1: 'mavaleur',
   maVariable2: 2
}

Il vous suffit ensuite de les déclarer dans votre Chatbot sous Paramètres > Paramètres avancées > Variables externes

Vous pourrez alors injecter ces variables dans vos textes / conditions.

Paramètres de démarrage du chatbot

  • autoStart : Permet au module de s'ouvrir automatiquement pour les nouveaux visiteurs. Valeurs possibles : true (oui) ou false (non)
  • ref : Permet de d√©marrer le chatbot sur une s√©quence particuli√®re ou sur la s√©quence par d√©faut √† chaque fois qu'un visiteur arrive sur une page de votre site. Pour d√©marrer sur la s√©quence par d√©faut, renseignez ce param√®tre avec 'restart'. Pour d√©marrer sur une s√©quence sp√©cifique, renseignez la valeur indiqu√©e dans le titre de la s√©quence (sur l'interface de votre bot)

Paramètres avancés du module web

  • messengerOnly : Permet de ne pas afficher la bulle d'ouverture / fermeture du chat. Valeurs possibles : true (mode fullscreen) ¬†/ false (par d√©faut).
  • hideLauncher : Identique √† messengerOnly (√† coupler avec hideCloseButton).
  • hideCloseButton : Permet de ne pas afficher la croix pour fermer le chat en mode fullscreen / mobile. Valeurs possibles : true / false.
  • containerId: Permet d'afficher le module dans une balise existante. Doit correspond √† un id d'√©l√©ment.
  • container: Permet d'afficher le module dans une balise existante. Doit correspond √† un √©l√©ment HTML, un √©l√©ment jQuery ou un selecteur jQuery.
  • fullscreen: Permet d'activer le mode fullscreen. Valeurs possibles: true / false.
  • silentMode: Permet de passer en mode silencieux, c-a-d qu'il vous faudra g√©rer l'ouverture et la fermeture du chat manuellement en JS.
  • onEvents: Fonction ex√©cut√©e au clic sur un bouton "Ev√®nement". Cela vous permet d'interagir avec votre SI.¬†
window.chatboxSettings = {
   onEvents: function(eventName, eventArgs) {
      // Les paramètres sont définis dans le bouton évènement de votre bot
      // eventName = "le nom de l'évènement"
      // eventArgs = {arg1: "val1", arg2: "val2"}
   }
}

Interagir avec le messenger

Vous pouvez interagir avec le messenger web pour :

  • ouvrir / fermer le chat
  • mettre √† jour des variables utilisateur
  • rediriger l'utilisateur vers une s√©quence de votre chatbot

Pour cela il vous faut d'abord récupérer le widget une fois que celui ci est prêt :

<script type="text/javascript">

    // On déclare la variable
    var botnationWidget;
           
    window.document.addEventListener('botnation.widget.ready', function() {
        // Lorsque le widget est prêt, on le récupère dans notre variable
        console.log("widget is ready");
        botnationWidget = window.BNAI; // save botnation widget instance
    });
           
</script>

Vous pouvez ensuite appeler les fonctions adéquats sur l'objet botnationWidget :

<script type="text/javascript">
    // On ouvre le chat
    botnationWidget.openChat();

    // On ferme le chat
    botnationWidget.closeChat();

    // On met à jour une variable utilisateur
    botnationWidget.setUserVariable("ma_variable", "la valeur", function callback(result) {
        // Une fonction appelée lorsque la mise à jour a été effectuée
        // Le paramètre result est à true si la mise à jour a été effectuée, à false sinon.
});

    // On redirige l'utilisateur vers une séquence du chatbot
    // Le paramètre blockId correspond à un ID de bloc (que vous trouverez dans le titre de votre séquence, comme pour le paramètre de démarrage 'ref')
    botnationWidget.sendRedirectToBlock("blockid", function callback(result) {
        // Une fonction appelée lorsque la redirection a été effectuée
        // Le paramètre result est à true si la redirection a été effectuée, à false sinon.
});
         
    // On redirige l'utilisateur vers un terme déclenchant une règle AI
    botnationWidget.sendRedirectToAiRule("keyword", function callback(result) {
        // Une fonction appelée lorsque la redirection a été effectuée
        // Le paramètre result est à true si la redirection a été effectuée, à false sinon.
});  
</script>

Exemple du mode silencieux

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
       
        <script type="text/javascript">
            var botnationWidget;
            function openChat() {
                if (!botnationWidget) return console.error("botnation widget is not ready");
               
                console.log("BNAI is ready", botnationWidget);
                botnationWidget.openChat(document.getElementById("container"));
            }
            function closeChat() {
                if (!botnationWidget) return console.error("botnation widget is not ready");
               
                console.log("BNAI is ready", botnationWidget);
                botnationWidget.closeChat();
            }
            window.document.addEventListener('botnation.widget.ready', function() {
                console.log("widget is ready");
                botnationWidget = window.BNAI; // save botnation widget instance
            });
            window.document.addEventListener('botnation.chat.opened', function() {
                console.log("le chat est ouvert");
            })
            window.document.addEventListener('botnation.chat.ready', function() {
                console.log("le chat est prêt");
            })
            window.document.addEventListener('botnation.chat.closed', function() {
                console.log("le chat est fermé");
            })
    window.chatboxSettings = {
       
        appKey: 'XXX',
        websiteId: 'XXX',
       
        silentMode: true,
        hideCloseButton: true,
    };
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://cbassets.botnation.ai/js/widget.js';
        js.async = true;
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'chatbox-jssdk'));
</script>
 
        <style type="text/css">
            #container {
                position: absolute;
                width: 400px;
                height: 600px;
                bottom: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <button onclick="openChat()">Open chat</button>
       
        <button onclick="closeChat()">Close chat</button>
       
        <div id="container">
        </div>
    </body>
</html>

Foire aux questions (FAQ)

Le module web ne s'adapte pas sur mobile, que faire ?

N'oubliez pas d'ajouter une balise viewport dans le <head>, de façon à ce que les proportions sont gardées sur mobile.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Le widget s'affiche bien mais mon bot ne répond pas ?

Il se peut que votre bot ne sont pas activé ou alors que la configuration de votre projet web ne soit pas bonne. Dans un premier temps, vérifiez la bonne activation de votre bot ainsi que l'URL de votre site web. Si le problème persiste, consultez les logs de la console javascript dans votre navigateur.

Le chat ne s'ouvre pas automatiquement alors que j'ai configuré autoStart à true ?

Lorsqu'un visiteur arrive sur votre site pour la première fois, le paramètre autoStart est pris en compte. Si il revient sur votre site ou qu'il change de page, nous regardons en priorité s'il n'avait pas fermé le chat et, le cas échéant, nous laissons le chat fermé volontairement.

Je souhaite afficher le chat en plein écran

Vous pouvez positionner l'option fullscreen : true pour cela. Le header du chat ne sera pas affiché (nom / description du chatbot) et la bulle d'invitation à discuter non plus.
Par défaut, le chat s'affichera sur la totalité de la page. Si vous souhaitez l'intégrer à l'intérieur de votre page web afin d'y conserver des éléments essentiels tels que votre header / footer, vous pouvez pour cela coupler l'option fullscreen avec l'option container ou containerId de manière à ce que le chat s'intègre dans un élément de votre site que vous pourrez dimensionner à votre contenance.

Pour en savoir plus sur les personnalisations graphiques de votre chatbot web, comme la couleur du thème, les textes de présentation ou l'avatar veuillez consulter l'article suivant :
Comment personnaliser son Chatbot Web


En savoir plus : 


retour à l'aide en ligne

Did this answer your question?