Installation and usage

Owned by Sebastian Arena
Last updated: Jan 18, 2024
3 min read

  1. Create a <SCRIPT> tag at the bottom of <BODY> in the HTML into which you want to integrate the chat-bot.

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

 

Asynchronous loading (optional)
It is possible to add a parameter to the URL described above for the script, to allow webchat to load asynchronously. This has the advantage of not interrupting the flow of loading your page, and not affect it for PageSpeed. The amount of time to wait will depend on your page, depending on how many other scripts it needs lo load. It is important to understand that Web Chat-Tonic always load AFTER every other content is loaded into the page, and the page is considered interactive. Having said that, the amount of time specified in this parameter, will add a delay after that happens.

By default Web Chat-Tonic will wait 2 seconds before loading, this has been proven by us that does not affect PageSpeed, or user experience.

Example allowing a 5 second delay after the page is loaded:

<script src="https://web.chat-tonic.com/api/v1/load/YOURAPP?asyncLoadTime=5000"></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 languages

  • lng: Web Chat-Tonic window language (“en“ or “es“)

  • firstName: First name of the user interacting

  • lastName: Last name of the user interacting

  • profile.id: Identification number, like a passport number, national identification number, license number, etc, of the user interacting

  • profile.email: Email of the user interacting

  • profile.phone: Phone of the user interacting

  • profile.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.

 

Initial greeting (optional)

Change the default initial greeting from the pre-configured one, to a different one with initialgreeting

Example changing the default initial greeting to a different keyword:

<script src="https://web.chat-tonic.com/api/v1/load/YOURAPP?initialgreeting=Hola, como estas?"></script>

 

 

Video example (in Spanish)