Create a
<SCRIPT>
tag at the bottom of<BODY>
in the HTML into which you want to integrate the chat-bot.Inside the tag
<SCRIPT>
define the parameter "src" with the url provided by the team Chat-Tonic.
The final version should be displayed in a format similar to the following one (where YOURAPP will be provided by Chat-Tonic):<script src="https://web.chat-tonic.com/api/v1/load/YOURAPP"></script>
Full screen landing page (optional)
Normally your web chat can be accessed via the following URL for a fullscreen experience, but can also be configured to use different subdomains.https://YOURAPP.web.chat-tonic.com
User information (optional)
In the src URL you can add optional parameters to control the data that chat-tonic will know about the user, that gets passed along web chat-tonic.
locale
: The user’s locale in the format “es” or “es-AR”. If not provided, Chat-Tonic will try to guess it according to the browser’s settings. This is specially useful when your bot is multi-language and you want to force the locale for specific web pages to load by default in other languageslng
: Web Chat-Tonic window language (“en“ or “es“)firstName:
First name of the user interactinglastName:
Last name of the user interactingprofile.id
: Identification number, like a passport number, national identification number, license number, etc, of the user interactingprofile.email
: Email of the user interactingprofile.phone
: Phone of the user interactingprofile.custom.[variable]
: Any variable that we want to record of the user interacting; these variables are then shown in the advanced view of user profile data in Customer Service
All this variables can be tested using a bot in our staging environment, by going to:
https://integracion.web.staging.chat-tonic.com
Or by using the script tag in your staging portal (never use it in a production environment):<script src="https://web.staging.chat-tonic.com/api/v1/load/integracion"></script>
User context (optional)
There’s an extra variable that can be included in the src URL called context
. This variable helps to determine the current context, scope, location, etc. of the web chat window. The context is saved, and in case it a change gets detected in it, the bot is notified to act accordingly. This feature needs to be coordinated with Chat-Tonic to allow the bot to respond correctly.
For example, a bot might react differently depending on the section on the client’s webpage. If we set the context
when loading the web chat script, the bot will be notified of that context change (optionally) or will know the current context each time the user sends a message. Knowing the location on the webpage might lead to different, or better answers.
The variable can be anything: a string, a number, a boolean, or even much richer data like JSON, which only needs to be encoded for URL for us to it. Complex metadata can be sent to the bot using the context, that will allow us to perform better on the bot based on that (and will need to be coordinated accordingly to do so).
The context can also be changed programatically, which is needed in single-page applications that do not refresh the webpage when changing locations.
Video example (in Spanish)