Sonny
Sign inStart free trial

Guide

Widget Customization

Make the chat widget match your brand. Customize colors, logos, messages, and behavior from your dashboard — no code changes needed.

How to customize

  1. 01

    Open Channels

    Click "Channels" in the sidebar. You need to be an owner or admin to change channel settings.

  2. 02

    Select your website channel

    Click the channel for your website, then open the "Live Chat" tab. All widget customization options live here.

  3. 03

    Update settings

    Change any branding, messaging, or behavior settings, check the Preview, then select Save changes.

  4. 04

    Changes apply immediately

    The widget fetches its configuration on each page load, so your changes will be reflected the next time a visitor loads your website.

Branding

Visual settings that control how the widget looks on your site. The launcher can use either of two styles:

  • Logo
  • Icon
SettingDescriptionDefault
Launcher StyleChoose Logo to use a custom image, or Icon to select one of Sonny’s built-in launcher icons.Icon
Widget LogoShown when Launcher Style is Logo. Upload a JPEG, PNG, GIF, or WebP image that is less than 2MB and at least 64x64px.No custom logo
Choose IconShown when Launcher Style is Icon. Select the built-in icon used for the launcher.Chat bubble
Icon ColorSet the color of the selected launcher icon with the color picker or a 6-digit hex value.#ffffff
Brand ColorApplied to the launcher button, chat header, send button, and outgoing message bubbles.#2563eb
Widget PositionChoose whether the widget appears in the Bottom Right or Bottom Left corner of the page.Bottom Right

Messages

Customize the text visitors see when they interact with the widget.

Greeting Message
The text shown at the top of the chat window when a visitor opens the widget. Use this to set the tone for the conversation.
Default: "Hi there! How can we help?" · Max 500 characters
Online Message
The status text shown in the chat header when at least one agent is online. Appears alongside a green indicator dot.
Default: "We typically reply in a few minutes" · Max 500 characters
Offline Message
The status text shown in the chat header when no agents are online. Appears alongside a grey indicator dot.
Default: "We're away — leave a message and we'll get back to you" · Max 500 characters

Behavior

Settings that control how the widget behaves for visitors.

Email Prompt Behavior
Control when visitors are asked for their name and email. Choose "Before first message" to require contact info upfront, or "After first message" (default) to let visitors start chatting immediately and capture their info after.
Pre-Chat Survey
Ask visitors for their details before the chat starts. Turn it on, then use Required Fields to choose Name, Email, or both. At least one field must remain selected.
Office Hours
Set your opening hours for each day of the week. The widget shows as online only when an agent is available during those hours — outside them, visitors see your offline message, and the AI auto-responder can step in if you use it.
Allowed Dev Domains
The widget only loads on your registered production domain by default. Add extra domains (like localhost:3000 or staging.example.com) to test the widget during development. localhost is always allowed automatically.
Hide “Powered by Sonny”
Remove Sonny branding from the widget. This is included with any AI plan or the BYOK unlock.
Show delivery ticks to visitors
Show a tick under a visitor's message after Sonny receives it. The tick does not mean an agent has read the message.

Install and manage the widget

Use Install Snippet to copy the code for your website. The live Preview shows how saved visual settings will look. If you no longer need the channel, select Disconnect Website and confirm the action.

Widget setup guide

Related docs

See how Sonny helps