The chat widget
The Iterochat widget is the chat experience your customers actually touch: a floating bubble on your site that opens into a conversation. The AI answers from your knowledge base, and when a question needs a person, the conversation hands off to one of your agents without the customer noticing a seam.
This page covers two things:
- How to embed the widget on your site.
- What your customers see when they use it.
Embedding
You add the widget with a single <script> tag. Copy it from Settings → Website Widget (it already contains your key) and paste it on your site:
<script
src="https://widget.iterochat.com/widget.js"
data-widget-key="wk_your_key_here"
async>
</script>
A few things this gives you:
- Always current. The script loads from
widget.iterochat.com, so it stays up to date automatically. You never host or update the file yourself. - Self-contained. No frameworks, no jQuery, no external CSS or fonts to add.
- Isolated. It mounts in its own isolated container, which keeps its markup and styles separate from your page (and your page's styles out of it), so it looks and behaves the same on any site.
Only the data-widget-key attribute is required. The async attribute just lets the script load without blocking your page. There's nothing else to configure in the tag.
What your customers see
When the script loads, a chat bubble appears in the bottom-right corner of every page it's on. Clicking it opens the chat panel (about 380px wide on desktop, full-height on mobile). The first time, customers are asked for their name, then they're chatting.
Inside the panel, customers get:
- Distinct message styles for the customer, the AI assistant (labeled "AI Assistant"), and human agents (shown with the agent's name).
- A typing indicator while the AI is composing a reply ("Replying…") or while an agent is typing ("Agent is typing…").
- A handoff line when a person joins, such as "You're now chatting with Alice", so the customer knows they're now talking to a human.
- An unread badge on the bubble when a new message arrives while the panel is closed.
- A "Powered by Iterochat" link under the input.
When a conversation is resolved, the customer is invited to rate the experience before the panel returns to its starting state.
Customize the widget
In Settings → Widget Appearance, you can match the chat widget to your brand:
- Primary color sets the launcher and accent color.
- Position places the launcher in the bottom-right or bottom-left corner.
- Header title is the name shown at the top of the chat panel.
- Greeting is the welcome message visitors see when they open the chat.
A live preview updates as you edit, so you can see the result before publishing. Switch the preview between Desktop and Mobile to check how the widget looks on each. Your changes go live on your site after you select Save appearance.
Appearance changes apply on their own. There is no need to re-embed the widget or change your snippet after you save.
Languages
The widget needs no language setting. The AI detects the language of each incoming message and replies in the same register: English, Bangla, or Banglish (romanized Bangla). So a customer who writes in Banglish gets a Banglish answer back.
This is handled entirely by the AI from the customer's own words. There is nothing for you to configure, and a single widget serves all three.
The widget's own buttons and labels (for example "Start Chat" or "End chat") are currently in English. The detection above applies to the conversation itself, meaning the AI's and agents' replies, which is what customers read and respond to.
Suggested questions
When a customer opens the widget for the first time in a conversation, it can show a few tappable chips: common questions you choose. Tapping one sends that question as the customer's first message, which gives people an easy way to start.
You configure these under Settings → Suggested Questions:
- Up to four chips, 120 characters each.
- Remove all of them to hide the chips entirely.
- Changes apply to new conversations, with no need to re-embed the widget.
See AI configuration for more on shaping what the widget offers.
Reliability
The widget is built to survive the messiness of real browsing:
- Sessions persist. The conversation is stored in the browser, so a refresh, a navigation to another page, or opening a second tab keeps the same conversation going rather than starting over. Messages stay in sync across tabs of the same session.
- It reconnects on its own. If the network drops, the widget shows a quiet "Reconnecting…" notice and retries with increasing back-off (waiting 1, 2, 4, 8, then up to 30 seconds between attempts) until it's back. Customers aren't shown error messages or technical details.
- Resolved conversations lock. Once a conversation is marked resolved, the input is disabled and the customer is offered the rating prompt, so they can't accidentally keep typing into a closed ticket. Opening the widget again starts a fresh conversation.
Troubleshooting
If something looks off, work through these first:
- The widget doesn't appear. Check that the snippet is on the page (pasted before
</body>) and that thedata-widget-keyvalue is your real key from Settings. With no key, or a blank one, the widget will not mount at all. - Styling looks wrong, or it clashes with your site. This shouldn't happen, because the widget is fully isolated from your page: your site's CSS can't reach inside it and its styles can't leak out. If you see a conflict, confirm you haven't added a second, conflicting chat script.
- Replies come back in the wrong language. Language is driven by what the customer types, not a setting. If answers feel off, the fix is usually in your AI setup and knowledge base. See AI configuration.
A placeholder or wrong widget key is the most common reason the widget silently fails to load. Make sure the data-widget-key is the exact value copied from Settings → Website Widget (it starts with wk_) and not the wk_your_key_here example from the docs. If a session can't be authenticated, the widget will quietly start a new conversation rather than show an error.