Initialization
The standard initialization script for your web chatbot can be copied directly from the "How To Embed" tab inside the Web Channel publishing dialog. The script is already configured for your chatbot and will look like this one below:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("<chatbotid>");
4
</script>
Copied!
This is the barebone initialization process: all the configuration will be read from your publish settings and nothing else is needed.

Advanced Initialization

The following sections will show how you can go much further with Xenioo initialization to significantly manipulate how the chatbot is initialized and settings are used.

Changing initialization settings

The initialization call can be modified to supply one or more initialization parameter that will override the settings you've specified in the Web Publishing Dialog. As an example, you could change the chatbot widget appearance delay like this:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("39b71741-1a09-45eb-86e4-f0c90b547d9d", {
4
appeardelay:5
5
}
6
);
7
</script>
Copied!
The above script will make the chat widget appear after 5 seconds. This parameter will automatically override the delay parameter you've specified in the Web Publishing Dialog settings.
You can of course add multiple settings like in the script below:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("<chatbotid>", {
4
appeardelay:5,
5
subtitle: 'Hello from Xenioo!!'
6
}
7
);
8
</script>
Copied!
Use the table below as a general reference for all the initialization parameters you can override:
Parameter
Type
Effect
name
string
The title of the chat area
subtitle
string
The subtitle of the chat area
style
string
The full url of your custom chat style sheet
appeardelay
number
The amount of seconds the widget will wait before appearing on the page.
avatarinline
boolean
If enabled will display your chatbot avatar beside each message bubble
nocounter
boolean
Set to true if the small messages counter displayed on the widget is hidden, otherwise false.
enablesounds
boolean
Choose to enable or disable the messages sounds of the widget
startopen
boolean
If true, the widget will automatically open as you enter the page
backcolor
string
The background color of the chat area
forecolor
string
The foreground color of the chat area
autoopenchatdelay
number
The number of seconds after which the chat area will automatically open
autoopenchatmobiledisabled
boolean
Enables or disables the automatica opening of the chat on mobile devices
waitforwidgetclick
boolean
If enabled, the widget will not retrieve any message from the server unless the user clicks on the widget
hidetimepart
boolean
If true, the time of each message from the chatbot will be hidden
displayuseravatar
boolean
Set to true if you want to display the user avatar beside each user message
showbubble
boolean
If true, displays the message callout bubble near the chat widget.
enabletextreader
boolean
If true, displays a speaker button on the top right corner of the chat widget, enabling text-to-speech
enablevoicerecording
boolean
if true, displays a small microphone near the user send button, enabling speech-to-text
readerperson
string
The list of preferred voices that Xenioo will try to use

Initializing with Variables and Tags

Different pages on your website may need different variables or tags to be supplied to your chatbot. As an example, you could have your chatbot receive specific campaign parameters so that it can track users coming from specific ad. To do so, you supply variables or tags directly inside the initialization script. In the following example, we're sending the variable test:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("<chatbotid>", {
4
variables:[
5
{ Name:"test", Value:"this is the value" }
6
]
7
}
8
);
9
</script>
Copied!
In a very similar way, you can supply one or more tags:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("<chatbotid>", {
4
tags:[
5
"VIP_USER",
6
"FROM_GOOGLE_AD"
7
]
8
}
9
);
10
</script>
Copied!
Both variables and tags will be made available to your chatbot from the very start and can be used immediately in your flow.

Starting from a specific behavior

If you want your chatbot to start from a specific behavior you can set the corresponding API token directly in the initialization script:
1
<script src="https://static.xenioo.com/webchat/xenioowebchat.js"></script>
2
<script>
3
xenioowebchat.Start("<chatbotid>", {
4
behaviour: "<YOUR BEHAVIOUR API TOKEN>"
5
}
6
);
7
</script>
Copied!
This setting will override the default start behavior and change the default flow. This setting is particularly useful if you have multiple pages on your website and want your chatbot to start addressing the user differently depending on the location.