Widget Customization

All widget settings live in Settings → Widget Settings in the dashboard. Click Save Changes and they apply to your live widget and the React Native SDK; no re-deploy needed.

Click Preview at the top of that page to open your saved widget on a sample web page in a new tab.

Style

Colors: by default the widget uses a slate → teal gradient (#334155 → #0f766e). Pick your own brand color from the presets or the color picker, and switch between Solid and Gradient; the launcher button, header, and visitor messages use it. Reset puts the colors back to the default.
Logo: upload an image (PNG, JPG, GIF, or WebP, up to 5 MB); free on every plan. It appears in the widget header and welcome bubble.
Position: bottom right, bottom left, top right, or top left.
Theme: light, dark, or auto (follows the visitor's OS preference).
Border radius: none, small, medium, or large corner rounding for the chat window and the launcher button.
"Powered by Kerabie": a small credit under the message box. Hiding it is included on every paid plan, or available as an add-on on Free.

Launcher and layout

Launcher, a floating chat bubble, or a wide search bar ("Ask anything…") docked to the top or bottom of the page. Typing in the bar and pressing Enter opens the chat and sends what was typed. The search bar has no attachment button, attach files from the chat itself once it opens.
Bubble icon: upload your own icon for the bubble (Pro and Enterprise), and set the icon size (16–48 px) and label font size (10–20 px).
Chat layout: Full widget (Home, conversations, help and tickets tabs) or Single chat: just the chat, with all of a visitor's messages shown as one continuous conversation. In Single chat you can optionally turn on the bottom navigation and a header menu (change name, sounds, download or email transcript).

Your settings are remembered in the visitor's browser, so the widget shows the right look immediately on every page load and updates quietly if you have changed anything since.

On every paid plan, turn on AI page awareness (Settings > Chat > AI). The AI assistant can then answer questions about the page the visitor is currently on, "what does this page say about pricing?", and can look at screenshots they attach or paste into the chat. While it works, visitors see an animated "thinking" orb.

Messages

Welcome message: the greeting shown before a visitor starts chatting. Add {{name}} to greet the visitor by first name (it is dropped when their name is unknown).
When the chat bubble / greeting is clicked: choose what opens: the home screen, a new conversation, help articles, or tickets (when tickets are on).
Tickets: the Tickets tab is off by default; turn it on under Behaviour.
Offline message: shown when your team is offline. See Offline Mode.
Quick replies: suggestion chips shown before the visitor's first message.

Behavior

Show typing indicator: visitors see when an agent is typing.
Sound notifications: play a sound in the widget when a new agent or bot reply arrives.
Save chat history: when off, visitors don't see a list of their past conversations; they can still start a new chat.
Auto-open: expand the widget automatically after a delay, once per visitor session.
Auto-close: close inactive conversations and tickets after a set time.

AI

With the AI chatbot enabled, you can upload a bot avatar that appears next to AI replies instead of the default bot icon.

Overriding from code

The dashboard is the source of truth. For per-page tweaks, a few values can be overridden in the install snippet:

<script>
  window.KERConfig = {
    widgetKey: "wk_yourkey_here",
    theme: {
      primaryColor: "#6d28d9",
      secondaryColor: "#8b5cf6",
      bubbleIcon: "https://yoursite.com/logo.png"   // overrides the logo
    },
    chatSettings: {
      welcomeMessage: "Hi there 👋 How can we help you today?",
      offlineMessage: "We're away, leave a message and we'll reply soon."
    }
  };
</script>

Any value set here wins over the dashboard setting on that page.

To open the chat from your own button, hide the launcher bubble, or move the widget at runtime, see the JavaScript API.