Web Widget
Add website chat as a bubble or bar, then style it and install it
Web Widget#
Website chat is one embed with two looks. Chat widget is a floating bubble. Chat bar is a bar on the page. Turning one on replaces the other, and both use the same install code.
Open Deploy, then Manage on Chat widget or Chat bar. The editor is Chat widget or Chat bar, with a live preview. Save changes stores that channel’s look and text. Saving does not turn the channel on, place it on your website, or start live auto-reply.
Turn website chat on#
- Go to Deploy and find On your website.
- Turn Chat widget or Chat bar On. Confirm the switch if the other one is already on.
- Choose Manage to edit that look.
- Open Install, copy the code shown there, and add it to your site. Until the channel is on, Install says website chat is off and does not show the code.
- Turn AI Auto-Reply on only when you want the agent to answer on that website chat. Off means the chat stays silent. AlonChat can refuse to turn auto-reply on until the agent is ready for live replies. If the bubble is set to channel links only, the Chat widget card has no auto-reply switch, because those buttons open other apps instead of this chat.
A plan limit can also keep a new website surface off until you free an agent slot or change the plan.
Editor tabs#
| Tab | What it is for |
|---|---|
| Content | Name, greeting, suggestions, input, notices, and the lead-capture shortcut |
| Style | Colors, light or dark, text size, and the bubble or bar |
| AI | Whether website chat follows Guidance or its own style, and source links |
| Calling | A call button in the public widget. Shown only when website voice is available |
| Install | Embed code, allowed domains, and identity verification |
Calling is not on every agent. When it is available, Website voice calls shows a call button so customers can speak with the same agent. Use Manage the Agent voice experience for the voice itself. See Voice.
Content#
| Setting | What it changes |
|---|---|
| Display name | Name in the chat header |
| Initial message | First message visitors see when chat opens |
| Suggested messages | Quick replies under the first message. Show suggestions hides or shows them |
| Response mode | For each suggestion: AI Reply, an instant Direct Reply from a Q&A, or Workflows |
| Message placeholder | Hint inside the message box. A required lead form replaces it until that form is submitted |
| Collect user feedback | Thumbs up and thumbs down on replies |
| Regenerate messages | Lets the visitor ask for another AI reply |
| Attachments | Lets visitors send images, video, audio, documents, and voice notes |
| Enable emoji picker | Shows the emoji button in the composer |
| Dismissible notice | A notice visitors can close. Use [text](url) for a link |
| Privacy consent gate | Blocks chat until the visitor presses accept. You set the message, policy link, and button labels |
| Show decline button | Optional. Declining keeps chat closed and shows your decline message |
| Footer | A short line under the input, with optional [text](url) links |
| Auto-show popup | Opens chat on its own after 1–5 seconds |
| Attention bubbles | Up to three short notes above the bubble. Subtle jump repeats that motion every 2–10 seconds |
| Lead capture | Shows whether the lead form is off, required, or timed. Configure opens Collect Lead. It does not enable the form by itself |
Suggested messages are buttons, not extra training. A direct reply sends the selected Q&A immediately. A workflow starts only when the visitor taps that suggestion.
Style#
These apply to both the bubble and the bar:
| Setting | What it changes |
|---|---|
| Appearance | Light or Dark chat surface |
| Text size | Default or Compact text |
| Profile picture | Image shown for the agent |
| Primary color | Accent used for the visitor’s messages |
| Use for header background | Fills the header with that accent. Check the preview if the title is hard to read |
Chat bar only:
| Setting | What it changes |
|---|---|
| Surface | Solid or Glass bar |
| Position | Left, Center, or Right |
| Scrolled logo | Oblong or Circle logo after the page scrolls |
Chat widget bubble only:
| Setting | What it changes |
|---|---|
| Bubble button color | Color of the floating button |
| Bubble icon & text color | Color of the icon and label. Auto keeps them readable on the button color |
| Launcher content | Website chat, Channel links, or Both |
| Channel destinations | Up to seven public links: WhatsApp, Messenger, Telegram, Viber, Instagram, Call, Text / SMS, Email, or Other link. A link does not connect that app to your inbox |
| Display behavior | Auto, Collapsed, or Show immediately. Shown when the launcher includes channel links |
| Position | Bubble on the Left or Right |
| Chat bubble icon style | Sparkle bubble, Filled bubbles, Outlined bubble, Outlined bubbles, or your own JPG, PNG, or SVG |
| Show text in the chat bubble | Adds a label on the button, with the icon on the left or right |
AI#
| Setting | What it changes |
|---|---|
| Use widget-specific style | Off uses the style from Guidance on every channel. On lets you write a style for website chat only |
| Show source links in web chat | Shows source links on grounded website answers. Other messaging channels stay without those links |
Widget-specific style does not change what the agent is allowed to do. It changes how website chat is written.
Install#
Copy the snippet from Install. Do not retype it from this page. The same floating-chat script follows whichever of Chat widget or Chat bar is on.
| Setting | What it changes |
|---|---|
| Platform installs | Connect Shopify or WordPress without editing the theme. Shopify then needs AlonChat enabled in App embeds. WordPress uses a site URL and pairing code |
| Allowed domains | Limits where the embed may load. Leave it off to allow any site that has the code. On, add domains such as example.com or *.example.com, without http:// |
| Floating chat (script) | The bubble or bar, using the same script |
| Inline chat (iframe) | A chat panel fixed in the page. It does not include the floating launcher or website identity verification |
| Identity verification | A secret key for identifying logged-in visitors. Save settings once to create it. Keep it on your server, never in the page or a public repo. Rotating it signs out existing tokens |
The manual guide on the same tab covers a custom site, Wix, and WordPress or Shopify theme fallbacks. Those steps only place the code. They do not turn auto-reply on.
Allowed domains save as you edit them. The tab warns you before copying if none are set. You can still copy, but an open embed can then be used on any site.
For the inline panel and other website setups, see Embedding. For logged-in visitors, see Identity verification.
Check it#
Use the preview while you edit, then save. After the channel is on and the code is on a published page:
- Confirm the bubble or bar is in the corner or position you chose.
- Open it and send a test message.
- If AI Auto-Reply is on, confirm the agent answers. If it is off, silence is expected.
- If lead capture is on, submit the form yourself. Opening chat does not create a lead.
- Check the conversation in AlonChat.
If it does not appear#
- Website chat is off on Install. Turn Chat widget or Chat bar on under Deploy.
- The pasted code is not the current snippet from Install.
- Allowed domains is on and this site is not listed.
- The page was not published, or a cache or ad blocker is hiding the script.
- Colors look old. Save Style, then refresh or try a private window.
If the bubble appears but the agent does not answer, check AI Auto-Reply, credits under billing, and the same question in Agent Studio test. A saved widget is not proof the agent is answering customers yet.
Next steps#
- Lead capture — ask for contact details with a form
- Help Page — a hosted page instead of an embed
- Embedding — inline chat and other install options
- Identity verification — identify logged-in visitors