Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Documentation for Webchat Web Chat setup.

Steps for installing, configuring and editing web chat on your website.

Index

Table of Contents
excludeIndex

Steps for installation

  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: <script src="url"></SCRIPT>

  3. OPTIONAL: In the url you can enter parameters such as query string

Optional parameters in the url

  • firstName: Username

  • lastName: User's LastName

  • email: User Email

  • lng: Webchat language (“en“ or “es“)

This information is used to be displayed in the web-chat and will only be valid for new users.

Customization

It is possible to setup web Chat-Tonic to be a landing page bot, through the configuration of aliases, that in term lead to a URL that is like this: https://alias.web.chat-tonic.com.

It is also possible to customize the bot image. The following are the formatting features that can be customized according to the brand image:

  • Logo of the window header (Image)

  • Title of the window header (text)

  • Popup chat window theme

    • Header color (HTML color)

    • Header height

    • Buttons colors (HTML color)

    • User message bubble color (HTML color)

    • Send button color (HTML color)

    • Show avatar next to bot message bubbles (yes/no)

    • Texts color (HTML color)

    • Texts fonts (Google fonts)

    • Texts font size

    • Texts bubble padding

    • Texts buttons color (on hover) (HTML color)

    • Icon size

    • Background (Image)

  • Launcher

    • Type (Image / Text)

    • Color (HTML color)

    • Text color (HTML color)

    • Hide borders (yes / no)

    • Format (Circular or square)

    • Size

    • Image (Image)

Other customizable bot features:

  • Allow sending files (yes/no)

  • Allow emojis (yes/no)

  • Allow sending voice messages (yes/no)

  • Auto-login (yes/no)

  • Auto message (yes/no)

  • Auto message (text)

  • Expiry of the session (yes/no)

  • Expiry of the session (seconds)

Other features

Open/Close webchat:

By using webchattonic.toggleContainer() the webchat opens or closes.
You can also use webchattonic.openContainer() or webchattonic.closeContainer() to open or close the webchat respectively.

Notification counter

By using webchattonic.emitBadge() a badge is showed/added with a number of "notifications".

Making sounds

By using webchattonic.emitSound(ARRAY) you receive an array of urls of sounds with different formats so that the sound can be played in different browsers. (Supports: mp3, mp4, ogg and wav)

Send message

By using webchattonic.emitMessage(TEXT) a text is received and displayed in launcher of the webchat.

Clear message

By using webchattonic.cleanMessage() => we clean the message that we emitted with the previous function

Issue notification

By using webchattonic.addNotification(CONFIG) a "notification" is generated by adding the badge, emitting sound, showing a message and cleaning that message after a while according to the config we pass it.

The config is a JSON of this style:

Code Block
{
  message: 'Hello, how can I help you?', (STRING or BOOLEAN) 
  sound: true, (ARRAY or BOOLEAN)
  cleanIn: 3000, (NUMBER (milliseconds))
  count: true (BOOLEAN)
}

If the message is a string I show that message, if I don't show by default "How can I help you?", unless the parameter has not been specified, that is false

If sound is an array equal to the one we would pass to emitSound() those sounds are reproduced, if I don't reproduce a sound by default, unless the parameter has not been specified, that is false

Yes message was specified, cleanIn is specified and is a number the text message will be cleared in that amount of milliseconds, if it is not kept visible until the chat is opened or another notification with text is created.

If count is true is displayed and/or one is added to the notification counter.

Send message as user

...

Children Display