9bx Connect
Widgets
Create the chat box that appears on your websites and apps, and install it.
Contents
- What it is for
- Who can use it
- Where to find it
- The screen explained
- Tasks
- Example scenario
- Tips
- Troubleshooting
- Related pages
What it is for
A widget is one chat box with its own look, opening hours, welcome message, team and chatbot. You can have several, for example one for your main site and one for the customer portal.
Who can use it
Users with the Widgets manage permission. You also need access to edit your website or tag manager to install it.
Where to find it
Chat & Messaging → Chat settings → Widgets
The screen explained
Widget list and the editor with the Look, Behaviour, Hours and Install tabs.
The list shows each widget with its status (On or Paused). New widget creates one; the pencil opens Edit widget; the bin deletes it after "Delete widget … ? Its snippet stops working." A live preview of the chat box shows beside the editor.
Tab: Look
| Field | Meaning |
|---|---|
| Name | For your team. |
| Colour | Main colour. |
| Position | Bottom right or Bottom left. |
| Logo address | An https image shown in the header. |
| Colour mode | Follow the visitor, Always light, Always dark. |
| Welcome line (English), Welcome line (Bangla) | Greeting for each language. |
| WhatsApp link | https://wa.me/your-number. Adds a WhatsApp card to the home screen. |
| Telegram link | https://t.me/your-bot. Adds a Telegram card. |
Tab: Behaviour
| Field | Meaning |
|---|---|
| Team that takes the chats | Which team's queue the chats join. |
| Chatbot | A chatbot answers first. Leave empty to go straight to an agent. |
| Answer from the knowledge base with AI | AI answers from your articles. Needs AI mode on in Chat settings. A person takes over when the AI is not sure. |
| Before the chat starts, ask for | Name, Email, Phone, each with Ask and Required. |
| Ask the visitor to agree to storing the chat | Consent tick box. |
| Show agents what the visitor is typing | Live typing preview. Mention it in your privacy notice. |
| Co-browse | Agents may ask to see the page. The visitor must allow it and form fields are hidden. |
| Call us button | Visitors call a phone queue from the browser. Choose the Queue that takes the calls. |
| Sites allowed to show this chat | Exact hosts like shop.example.com or *.example.com. Add mobile for your apps. "No sites allowed yet" means the widget will not show anywhere. |
| Widget is on | Pause or resume this widget. |
Tab: Hours
| Field | Meaning |
|---|---|
| Open all day, every day | Skips hours. |
| Time zone, From, Until and days | Opening hours. |
| When closed, the away form | Makes a ticket or Sends an email (Email to an address). |
Tab: Install
Save the widget first ("Save the widget first."). Then pick your platform. Every option already contains your widget key. Each guide has Copy, Download and Steps.
| Group | Options |
|---|---|
| Plugins | WordPress, Shopify |
| Website builders and tags | Plain HTML, Wix, Squarespace, Webflow, Google Tag Manager |
| Frameworks | React, Next.js, Vue |
| Mobile apps | Android, iOS (SDK source link) |
Tasks
Install with an HTML snippet
- Open the widget, tab Install, choose Plain HTML.
- Press Copy on the Install snippet.
- Paste it just before the closing
</body>tag on every page. - Add the site to Sites allowed to show this chat on the Behaviour tab.
- Open the site. The chat button appears at the bottom corner.
Install on WordPress
- In Install, choose WordPress and press Download.
- In WordPress open Plugins → Add New → Upload Plugin and upload the file.
- Activate it and open Settings → 9bx Live Chat. The key and address are already filled in.
- Optional: tick "Logged-in users" and paste the widget secret to mark logged-in people as verified.
Install on Shopify
- Online Store → Themes → Edit code. Add
snippets/9bx-chat.liquidusing the first file shown. - In
layout/theme.liquid, add the render line just before the closing body tag. - Alternatively use the downloaded kit, which also holds a theme app extension for the Shopify CLI.
Wix, Squarespace, Webflow, Google Tag Manager
| Builder | Where to paste |
|---|---|
| Wix | Settings → Custom Code → Add Code. Paste, choose All pages, place in Body - end, publish. |
| Squarespace | Settings → Advanced → Code Injection → Footer, save. |
| Webflow | Project settings → Custom code → Footer code, save and publish. |
| Google Tag Manager | New tag, Custom HTML, trigger All Pages, save and publish the container. |
Recognise logged-in visitors (signed identity)
Use this when your customers sign in to your site, so agents see them as Verified on every device.
- On the Install tab, copy the Identity secret. Keep it on your server only.
- On your server, compute an HMAC-SHA256 hash of
external_id|timestampusing the secret. - Pass the person and the hash to the widget with the identify call shown in the Signed identity guide.
- Agents now see Verified in the visitor panel.
New secret replaces the secret. Your server must use the new one at once, or signed-in visitors fall back to anonymous.
Add a proactive greeting
Proactive messages are in Chat settings.
Example scenario
Padma Net Support creates "Main website": colour teal, bottom right, team Support, asks for Name and Phone, hours Sat to Thu 9:00 to 21:00, and when closed it Makes a ticket. They paste the snippet on padmanet.example and list padmanet.example and *.padmanet.example as allowed sites.
Tips
- Ask only for what you need. Each required field loses some visitors.
- Test outside opening hours to see the away form.
- Keep the identity secret out of browser code.
Troubleshooting
The chat box does not show. Check that the widget is on, the site is in the allowed list, the snippet is before </body>, and Live chat is on in Chat settings.
Visitors are never Verified. The hash must be computed on your server with the current secret.
Shopify or Wix shows nothing. Publish the site after saving the code.