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.