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>

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.

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)