Installing your chatbot on your website | BOTNATION AI

Create a web project

For starter you have to create a web project:

While you are building your chatbot, there is a "Enable" button on the top right. It means to show the list of your websites. It should be empty.
Click on the "Add your website" button.
In the popup window, you'll need to fill some infos:

Website name : This will show in your websites' list, be sure to make it explicit.

Web address of your website: Put the entire URL. Exemple http://mysiteweb.com. This is really important because your chatbot will only work on this URL.
N.B : If your website use an http AND an https address, don't worry, your chatbot will work on both.

Enable subdomains (facultative) : You can activate this option if you want your chatbot to work on different subdomains.
Exemple: If your website adresses are http://mysiteweb.com and http://www.mysiteweb.com you must put http://mysiteweb.com as your Web address of your website and activate Enable subdomains.

When you've fill all the field, click the "Create and enable bot" button.

N.B : You can modify all those field whenever you want by clicking on the gearing wheell icon in your webiste's list and access to your website's setting.

Javascript code integration on your website

If you use Wordpress use this article : Installing and configuring the Wordpress Botnation plugin.

In your website's setting, get the javascript code to copy on your website:

You have to embed this code at the end of the <body> section of your html code.

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

The configuration is in the window.chatboxSettings object. Here are all the available settings:

Mandatory settings (don't modify)

appKey (mandatory) : Don't modify the value that has been set.
websiteId (mandatory) : Don't modify the value that has been set.

User customization settings

language : 2 characters code.
userId : Your website user's unique ID. When the user will come back to your website, he'll find the discussion as it left it and all variables associated to him.
firstName : Firstname of the user. This value can be used in your chatbot with the {{FIRSTNAME}} variable.
lastName : Lastname of the user. This value can be used in your chatbot with the {{LASTTNAME}} variable.
gender : Gender of the user (possible values : 'M' or 'F'). This value can be used in your chatbot with the {{GENDER}} variable.
externalDatas: An object containing your custom variables. You will be able to use these variables in the chatbot.

externalDatas: {
   myVariable1: 'my value',
   myVariable2: 2
}

Chatbot launcher settings

autoStart : Allow the launcher to open the messenger for every new user. Possible values : true or false.
ref : Allow the chatbot to start on a specific sequence on a specific page of your website. If you want the chatbot to start on the default sequence, Choose the value 'restart'. To specify a sequence, get the value near the title of the sequence on Botnation.

Advanced settings

messengerOnly : Show the chatbot open/close icon. Possible values : true (fullscreen/mobile mode) / false (default).
hideLauncher : Show the chatbot launcher. (use with hideCloseButton).
hideCloseButton : Hide the close button (cross) in fullscreen/mobile mode. Possible values : true / false.
containerId: Allow to show the chatbot module in existing html tag. Must be the id of an element.
silentMode: The chatbot is closed. You must open and close it using JS.
onEvents: Fonction used when an "Event" button is clicked. Allows you to interact with your 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"}
   }
}

Silent mode exemple

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

Frequently Asked Questions (FAQ)

The chatbot module is not responsive on my mobile, what should I do?

Just add a Viewport tag in the <head> section, the display will adapt to the screen.

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

The module is on the website but the chatbot don't work ?

First check if your chatbot is activated on Botnation. If so, check your URL in your website settings (gearing wheel near the name of your Website).

The chatbot don't start automatically even if I have set autoStart to true?

The autoStart settings works the first time a new user comes to your website. If the user close the module and come back later, the module will stay closed.

Launch BOTNATION AI 🚀