Overview
The web chat widget is a lightweight, embeddable chat window that your website visitors can use to start conversations with your support team (and AI).
Setup steps
- Go to Admin → Projects → [Your Project] → Channels
- Create a new Web channel
- Configure appearance: colors, welcome message, pre-chat form fields
- Set Allowed Origins to your website domain(s)
- Copy the embed code snippet
- Paste it into your website's HTML, just before the closing
</body>tag
Embed code
The embed code looks like this:
<script async src="https://chatonio.com/widget/loader.js" data-channel-id="YOUR-CHANNEL-ID"></script>Customization
You can customize the widget's appearance from the channel settings:
- Primary color — button and header color
- Welcome message — shown when the widget opens
- Pre-chat form — collect visitor name and/or email before chatting
- Position — bottom-right or bottom-left
The widget is fully responsive and works on mobile devices.
Speaking your visitors' language
The widget adapts to each visitor automatically. When someone opens the chat, Chatonio shows it in your page's language — it reads the page's standard <html lang> attribute, so a visitor browsing the Russian version of your site sees a Russian widget even if their browser is set to another language. The title, subtitle, greeting, offline message and launcher text you set, your AI assistant's display name, and your help center (knowledge base and FAQ) articles all appear in that language whenever a version exists. If the page doesn't declare a language, the widget falls back to the visitor's browser language.
The widget's own buttons and labels ship in English and Russian, but everything you and your AI write can be offered in as many languages as you translate. The language a visitor sees before typing follows the page (with the browser as a fallback); once they start writing, the AI simply replies in whatever language they actually use — its first reply follows the page language too.
Adding your own translations
On the Web channel settings page, open the Text translations section. It has a tab per language where you can provide translated versions of the five visitor-facing strings — title, subtitle, greeting, offline message and launcher text. Leave a field empty and it falls back to your channel's default-language wording. To make your knowledge base and FAQ appear in another language, add translations to those articles as usual — the widget picks them up automatically.
Forcing a specific language
If your site doesn't set the standard <html lang> attribute — or you want a specific embed to always use one language — add a data-lang attribute to the embed snippet. Its value takes priority over automatic detection:
<script async src="https://chatonio.com/widget/loader.js" data-channel-id="YOUR-CHANNEL-ID" data-lang="ru"></script>Custom pre-chat fields
The pre-chat form is not limited to name and email. In the Web channel settings, under Pre-chat form, you can add your own fields — short text, email, phone, a longer message, a dropdown, or a checkbox — and mark any of them as required. Each field can carry a label in every language you support, and the form is shown to each visitor in their browser language. Whatever visitors enter is saved with the conversation and shown to your operators in the info panel next to the chat.
Reaching out first
The same widget can also greet visitors on its own. In the Marketing area you can set up proactive messages — an automatic chat greeting that appears after a visitor has spent time on your site, opens a specific page, or is about to leave — as well as on-site popups and banners. A proactive greeting opens straight into a real conversation your AI handles, so nobody is left waiting. These are available on the Pro and Ultimate plans.