The web chat widget is a chat bubble you drop onto any web page with a single <script> tag. Visitors chat with your AI; when a person takes over, their replies appear in the same bubble — live.
wk_…) that routes every chat to your desk. Use Copy snippet there, and Preview widget to see it before it goes near your site. See Settings.Adding it to your site
Paste the snippet just before your closing </body> tag:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>The widget loads in its own frame, so it won’t clash with your site’s styles or scripts.
Options
| Attribute | What it does |
|---|---|
data-key |
Required. Your desk’s widget key, from Settings. |
data-position |
right (default) or left — which corner the bubble sits in. |
data-offset |
Pixels from the corner (default 20). |
data-lang |
Pins the widget’s language, e.g. ja. Leave it off and each visitor sees their own browser language. |
If your page shows a reCAPTCHA badge in the same corner, the widget automatically lifts above it so the two don’t overlap.
What language the widget speaks
Left alone, the widget follows each visitor’s own browser language. A Japanese visitor to an English site gets the Japanese bubble; nothing to configure, and different visitors to the same page can see different languages.
To pin one language instead — a site that serves one market regardless of who is reading — add data-lang:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>Translated into 11 languages: English, Japanese, Korean, Chinese (Simplified and Traditional), Spanish, French, German, Portuguese, Arabic and Russian. Arabic is laid out right to left, and Chinese follows the visitor’s script — Traditional for Taiwan, Hong Kong and Macau, Simplified otherwise. Any other language falls back to English rather than showing a half-translated bubble, so data-lang="it" gives you English.
data-lang. The AI’s answer follows the language the customer writes in. And the AI can only answer from knowledge base articles written in that language — an English article will not answer a Japanese question. If you serve customers in two languages, write your articles in both. See your knowledge base.The same applies to the hosted web form: add ?lang=ja to its address to pin it, or leave it off to follow the visitor.
Your brand colour
Until you pick one, the chat is our teal. Choose your own colour and it is used for the chat’s header, its buttons and your customer’s own messages, for the close (✕) button on the launcher while the chat is open, and for your hosted web form.
- Open your desk’s Settings. In the Web chat section, find Brand colour, just below Chat bubble icon.
- Pick a colour and click Save colour.
- Changed your mind? Reset to default puts our teal back.
Your colour reaches your website within about 5 minutes, and there is nothing to re-paste. Like the icon, only desk admins and the owner can change it.
Using your own bubble icon
By default the launcher on your website is our teal bubble with a speech-balloon icon (💬). You can replace it with your own PNG so the widget looks like it belongs to your site. The image you upload becomes the whole button: it fills the entire 56-pixel launcher, and we no longer draw our teal circle behind it.
- Open your desk’s Settings. Go to the Web chat section and find Chat bubble icon.
- Click Upload PNG and choose your file. The preview bubble beside the button shows exactly how the launcher will look.
- Changed your mind? Reset to default puts our speech-balloon icon back.
| Image | What works |
|---|---|
| Format | PNG |
| Recommended size | Square, at least 112×112 pixels |
| Displayed size | Fills the whole launcher, 56×56 pixels |
| Shape | Set by the image itself — a transparent background is strongly recommended |
| File size | 256 KB maximum |
The launcher is drawn at 56×56 pixels, so a 112×112 (or larger) source keeps your mark sharp on high-resolution screens. A subtle shadow is added for you and follows the outline of your artwork, so there is no need to bake one into the PNG.
The launcher icon is an image, so your brand colour doesn’t repaint it — the icon you upload is what visitors see. Because our circle is no longer drawn behind your image, a transparent PNG means the colour visitors see is the colour of your own artwork.
What the visitor sees
- They open the bubble and leave a name, email, and first message.
- The AI answers from your knowledge, with sources, right in the chat — without waiting for anyone on your team.
- A person can take over — their reply appears in the same chat within a few seconds.
The email they leave is how they’re recognised next time — see your customer store.
data-key everywhere the snippet is pasted, and anywhere your form posts it.Web chat is one of five ways in — see how customers reach you, and how a ticket works once a chat starts.