Install chat widget
Last updated
Last updated
Your script can be found under Chat widget -> Settings.
Copy the script and install it on your website using your preferred method.
Copying the script from your account will automatically include your bot ID. If you have more than one bot, make sure you have selected the correct bot when copying the script.
Name
Setting
Description
Avatar
Default/custom
Default is a picture of Ebbot. If you choose custom it let's you upload what ever image you want. Supported images are gif, png and jpeg
Chat bubble icon
Default/custom
Default is the ebbot chat icon If you choose custom it let's you upload what ever image you want. Supported images are gif, png and jpeg
Color
Example #ff33f3
Insert the desired color code or use the built in color picker
Placeholder text
Example:"Ask me something..."
The text that is visible in the chats input field by default
Chat client height
Half/Tall
Half takes up 60% of the screen, Tall takes up 90%
Footer
On/Off
Let's you toggle a small footer below the chats input field on or off.
Chat Client Position
Left/Right
Positions the chat to the left bottom corner or the right bottom corner
Chat client position on mobile
Left/Right
Positions the chat to the left bottom corner or the right bottom corner (for mobile only)
Open chat automatically on page load on mobile?
Yes/No
Wether or not to auto-open the chat on page load for mobile (no is recommended)
Allow different arrow color?
Yes/No
Yes shows the colorpicker where you can set the color: Example #ff33f3
Hide chat
Yes/No
Disables the chat for everyone
Disable pop after internal link in desktop
Yes/No
If set to yes the chat wont auto-open when you link to a page within the same domain
Disable pop after internal link in mobile landscape
Yes/No
Same as above for but for mobile (landscape)
Disable pop after internal link on mobile portrait
Yes/No
Same as above for but for mobile (portrait)
Disable title and badge count for bot messages
Yes/No
Yes removes the badge that show number of unread messages
Sounds for bot
Yes/No
Enable and disable the sound for when a new message is received from the bot
Sounds for agent
Yes/No
Enable and disable the sound for when a new message is received from an agent (after handover to a human)
Show agent typing on chat
Yes/No
Wether to send typing indicator or not
Show agent avatar on chat top
Yes/No
Show the agents avatar after handover has been done (top)
Show agent avatar on chat bubble
Yes/No
Show the agents avatar after handover has been done (with messages)
Clear chat on tab close
Yes/No
Resets the chat if the user closes the tab (good for sensitive data)
Chat language
English/Swedish/Norwegian
Let you choose what language the chat should be displayed in (menus, buttons and also WCAG-support)
Min Message Delay (ms)
0-100000
The minimum time in ms that it will take before the message gets sent.
Example: 100
Max Message Delay (ms)
0-100000
The maximum time in ms that the bot will wait before the message gets sent
Example: 1000
Character Delay (ms)
0-100000
How much time each character adds to the calculated time before the message gets sent.
Example: 15
Typing Delay (ms)
0-100000
For how long the typing indicator is sent.
Example: 50
If you need even more branding possibilities our chat is fully customizable with the use of CSS.
To embed the widget on your website, modify the script and add the provided code to the relevant element in your site's structure.
Start by adding the following line of code in the script: variant: 'hero' or variant: 'embedded'.
botId and ovh lines illustrate where the variant code can be added, do not change them.
After modifying the script, insert the following code into an element with an ID on the webpage where you want the chat to appear.
That's all you need to do to embed the chat. Keep in mind that the guide won't appear as a widget on pages where the script includes the line variant: 'hero'.
