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:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<API Token>");
</script>

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:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("39b71741-1a09-45eb-86e4-f0c90b547d9d", {
            appeardelay:5
        }
    );
</script>

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:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<API Token>", {
            appeardelay:5,
            subtitle: 'Hello from Xenioo!!'
        }
    );
</script>

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

readerlanguage

string

The code of the language you would like to set for the text-to-speech and speech-to-text engines. The value must be set in the code_CODE format (e.g. it_IT, en_US etc).

speakerenabled

boolean

If true, the bot will start using text-to-speech right away, without waiting for the user to turn it on.

cookiedomain

string

Set the cookie domain name for the Xenioo chatbot cookie. The Xenioo chatbot cookie contains the current user-id for chat tracking. Use this setting to set an higher level domain for the cookie.

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:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<chatbotid>", {
          variables:[
            { Name:"test", Value:"this is the value" }
          ]
        }
    );
</script>

In a very similar way, you can supply one or more tags:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<chatbotid>", {
          tags:[
            "VIP_USER",
            "FROM_GOOGLE_AD"
          ]
        }
    );
</script>

Both variables and tags will be made available to your chatbot from the very start and can be used immediately in your flow.

Using variables or tags you can deeply customize the data used by your bot at startup. In the following example, we retrieve the current client IP and we supply the value to the current conversation as it starts:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
      
      fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
              
              //now that we got the ip address, we forward it
              //to the conversation
              xenioowebchat.Start("<chatbotid>", {
                        variables:[
                              { Name:"ip_address", Value: data.ip }
                        ]
                      }
                  );
        })
        .catch(error => console.error('Error fetching IP address:', error));

    
</script>

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:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<chatbotid>", {
          behaviour: "<YOUR BEHAVIOUR API TOKEN>"
        }
    );
</script>

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.

Last updated