Documentation for Webchat Web Chat setup.
Steps for installing, configuring and editing web chat on your website.
Index
| Table of Contents | ||
|---|---|---|
|
Steps for installation
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:<script src="url"></SCRIPT>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
...
| Child pages (Children Display) |
|---|