Colours
- Brand colour, the accent used on the launcher and the "Chat with us" button.
- Text on accent, the colour of text and icons that sit on top of your brand colour, so they stay readable.
- Avatar & bubbles, the colour of agent avatars and message bubbles.
Launcher & messaging
- Launcher text, the label on the chat button (for example "Chat with us").
- Position, pin the widget to the bottom-left or bottom-right corner.
- Welcome message, the greeting visitors see when they open the chat.
- Auto-open, have the widget open on its own when a page loads, if you want to invite the conversation.
The pre-chat form
Turn on the pre-chat form to ask visitors for their name and email before the chat starts, handy for capturing leads. Leave it off and visitors can start chatting straight away.
Settings are delivered to the widget live, so you don't need to touch your embed code after the first install. Tweak a colour, save, and it's live on your site.
Stacking order
By default the chat sits above everything else on your site, so it can never end up hidden behind a sticky header, a cookie banner or another tool's floating button. Almost every site should leave this alone.
Occasionally you want the opposite — a mobile navigation bar, a cookie consent bar or a checkout bar that should stay over the chat. For that, set Stacking order (z-index) in Widget Settings to a number lower than that element's own z-index. Leave the field blank to go back to the default.
If your header uses z-index: 999 and you want it above the chat, set the widget to something below 999. If the chat is disappearing behind part of your site, clear the field instead — blank always wins.
You can also set it at install time if you prefer to keep it in code. Any value saved in Widget Settings takes priority, so this is only a fallback for the first load:
<script>
window.InitioChatConfig = {
widgetToken: 'YOUR_WIDGET_TOKEN',
zIndex: 900 // optional — omit to sit above everything
};
</script>New here? Start with installing the widget, then come back to make it yours.
Asked before
Tap a question. I'll answer right here.
- How do I change the colour of my chat widget?
- Set your brand colour in Workspace, Widget Settings. It controls the launcher and the chat button, and you can also set the text-on-accent colour and the avatar and bubble colour. Changes apply live without editing your embed code.
- Can I move the chat widget to the left side of my site?
- Yes. In Widget Settings you can pin the widget to the bottom-left or bottom-right corner.
- How do I change the chat launcher button text?
- Edit the launcher text in Widget Settings, for example Chat with us. It updates on your site live.
- What is a pre-chat form and how do I turn it on?
- The pre-chat form asks visitors for their name and email before the chat starts, which is handy for capturing leads. Turn it on in Widget Settings, or leave it off so visitors can chat straight away.
- The chat widget is hidden behind my header. How do I fix it?
- Clear the Stacking order (z-index) field in Widget Settings. Left blank, the widget sits above everything on your site. A number in that field can place it underneath your header.
- Do I need to re-install the widget after changing settings?
- No. Appearance and behaviour are delivered to the widget live, so you only install the embed code once. Change a setting, save, and it is live on your site.
