Change the widget look and position

What it is

Widget appearance has two layers in two different places, and knowing which layer owns which control saves a lot of hunting:

Layer	Where	Controls
The launcher — the bubble on your page	Integrations → Web widget, in the embed configurator	Corner, size, offsets, hide launcher, auto-open, inline container
The chat window — what opens when it is clicked	Chatbot Settings → Appearance and Settings → Messages & language	Avatar, header theme, colours, font family and size

Rule of thumb: if it is outside the chat window, it is on Channels. If it is inside, it is on Settings.

A third thing exists and is neither: the sidebar's Settings → Appearance changes your own dashboard theme and language and is invisible to visitors.

When you would use it

• The bubble covers a Buy button, a cookie banner, or your navigation.
• You want the chat to open by itself for first-time visitors.
• You want your own styled button instead of the default bubble.
• You want the chat mounted inside a page section rather than floating.

Where to find it

Open Dashboard → Chatbots → your chatbot → Integrations → Web widget for the launcher, and Settings → Appearance for the chat window.

The launcher configurator

Every option below is optional. Only values you change from the default are written into the snippet, so a copied snippet stays short and anything you leave alone quietly follows the chatbot's saved default at runtime.

Launcher position. Bottom right (default), bottom left, top right, top left. Bottom right is conventional and therefore invisible to visitors; a top corner is unusual and will be noticed, for better or worse.

Launcher size. Small, medium (default), large. Small is a reasonable choice on content-dense pages; large helps on a page where the chat is the point.

Horizontal and vertical offset. 0 to 200 pixels from the anchored corner. This is the fix for a bubble that collides with a sticky cart button, a back-to-top control, or a cookie banner. Raising the vertical offset by 60–80 pixels usually clears a standard consent bar.

Hide the launcher button. Headless mode: no bubble at all. Pair it with your own trigger — any element on your page carrying the open attribute becomes a trigger, or you can call the chat from your own code. Use this when you already have a "Chat with us" button in your design.

Open automatically. After a delay of 1 to 60 seconds, once per visit. Off by default on mobile, because an auto-opening chat on a phone covers the entire screen and reads as an ad. There is a separate switch to enable it on mobile anyway — think carefully before you use it.

Inline container. Mounts the chat inside an element on your page instead of floating over it. Good for a dedicated support section or a help panel. Pair with the hidden launcher when the section itself is the entry point.

A live preview shows the launcher corner, size, and offsets as you adjust them.

Save as default, or per embed?

Two ways to apply your choices, and the difference matters when you have more than one site:

• Save as default stores them on the chatbot. Every embed that does not override them — and the live widget already on your pages — picks them up on the next load. No re-pasting.
• Copy the snippet with your adjustments and they are written into that one tag as attributes, overriding the default for that page only.

So: if the same chatbot appears on your main site and on a campaign page that needs a different corner, save the common setup as the default and override only the campaign snippet.

Auto-open: a caution

It reliably increases conversations. It also reliably annoys some people. Before switching it on:

• Use a delay of at least 5–10 seconds. Opening instantly reads as a pop-up.
• Leave mobile off unless you have a specific reason. A phone screen has no room for a chat window over your content.
• Do not combine it with a cookie banner and a newsletter modal. Three overlays on arrival is a bounce.
• Watch your credit spend. More conversations means more message credits. See Message credits.

Steps

1. Open Integrations → Web widget and open the Website embed option.
2. Set the launcher corner and size, and watch the preview.
3. Adjust the offsets if the bubble collides with anything on your page.
4. Optionally set auto-open in seconds, and decide about mobile.
5. Either Save as default for this chatbot, or copy the snippet with the overrides baked in.
6. If you copied a new snippet, replace the old tag on your site and republish.
7. Open Settings → Appearance to change the avatar, header theme, and colours inside the chat window. See Chatbot appearance.
8. Check a desktop page and a phone page. In portrait, confirm the bubble is not covering checkout, navigation, or a consent banner.

What you will see

The configurator sits inside the Website embed drawer, with a live launcher preview and the generated snippet beneath it. Changing an option updates the snippet immediately, so you can see exactly which attributes your choices add.

Hiding the launcher adds a note explaining how to open the chat from your own element or from code.

Limits and plan notes

Offsets are capped at 200 pixels. Auto-open delay is capped at 60 seconds. These settings are purely cosmetic — they never change what the chatbot answers, and saving them does not trigger retraining.

The widget itself requires a paid plan with integrations. The chat window's own appearance (avatar, colours) works on every plan, since it also applies to the hosted page.

The corner options are named in physical terms (bottom-right, bottom-left) and mean the same thing regardless of whether your dashboard is in a right-to-left language.

Common problems

I changed the colours but the snippet looks the same.

Correct — brand colours are not in the snippet. The widget fetches them from the chatbot at load time. Hard-refresh your site; if it is still stale, confirm you are not serving your own copy of the widget script.

The bubble covers my Buy button.

Switch corner, or raise the offset. Check on a phone as well as desktop — the collision is usually worse in portrait.

Auto-open does nothing on my phone.

That is the default. Enable the mobile switch if you genuinely want it there.

I hid the launcher and now the chat cannot be opened.

Headless mode needs a trigger. Add data-agentency-open to an element on your page, or call AgentencyWidget.open() from your own code. Both, and the events you can listen for, are in Control the widget from your code.

My changes apply on one site but not another.

The second site's snippet has its own overrides baked in. Recopy it, or clear the overrides and rely on the saved default.

Is this the same as my dashboard theme?

No. Dark mode and dashboard language live under the sidebar's Settings → Appearance — see Appearance, language and timezone.