Skip to main content

Appearance & Branding

The Widget Studio is where you design how your chat widget looks. It's split into two panels: settings on the left, and a Live Preview on the right that updates instantly as you make changes. This guide walks you through each settings card as a numbered procedure.

Widget Studio and live preview

Before you start​

  1. Open Web Widget → Widget Studio.
  2. Use the Home / Chat toggle on the Live Preview to switch between the welcome screen and the conversation screen while you design.
  3. Make your edits in the cards below — the preview reflects them immediately.
Always save your work

Changes are not applied to your live website until you click Save Changes at the top of the Studio. The preview shows your edits, but visitors only see them after you save.

How to set your company branding​

Use the Company Branding card to set your brand identity.

  1. Next to Company Logo, click Upload and choose an image. It appears in the widget header. To remove it, click the trash icon.
  2. Next to Agent Avatar, click Upload and choose an image. It appears next to agent messages. To remove it, click the trash icon.
  3. In the Company Name field, type your business name (for example, Your Company).
  4. Confirm the preview shows your logo, avatar, and name, then click Save Changes.

How to customise the launcher button​

The Launcher Button card controls the floating chat bubble visitors click to open the widget.

  1. Click the Icon selector and pick an icon. You can search the list: Chat, Chat with dots, Support, Wave, Smile, or Send.
  2. Under Shape, choose Circle or Rounded.
  3. Under Size, choose Small (48px), Medium (56px), or Large (64px).
  4. Toggle Notification Badge on if you want an unread-message count to show on the launcher.
  5. Check the launcher in the preview, then click Save Changes.

How to set colors and corner shape​

Use the Appearance card to set your accent color and overall shape.

  1. Set the Primary Color — this is the main accent, used for user messages and buttons. You can:
    • Click the color square to pick any color, or
    • Type a hex value in the field, or
    • Click one of the quick swatches (blue, purple, green, amber, red).
  2. Set the Corner Radius (0–24px) — drag the slider, or click a preset: Square, Subtle, Rounded, or Pill.
  3. Toggle the Footer Badge ("Powered by" branding) on or off. When it's on, edit the footer text in the field that appears.
  4. Click Save Changes.

How to design the home screen​

The home screen is the welcome view visitors see when they first open the widget. Open the Screen card and select the Home Screen tab.

  1. Toggle Enable Home Screen on. (When off, visitors go straight into chat and the remaining options are hidden.)
  2. In Greeting Title, enter the big welcome heading (for example, Hi there!).
  3. In Greeting Subtitle, enter the supporting line (for example, How can we help you today?).
  4. In Agent Name, enter the name shown on the conversation-starter card.
  5. In Start Chat Button, enter the label for the button that opens a conversation.
  6. Under Header Curve Style, choose the divider shape between header and content: Flat, Rounded, or Wave.
  7. Under Widget Size, set the Width (280–450px) and Height (450–800px). The recommended size is 340 × 650 for the best display.
  8. Toggle FAQ Suggestions on to show clickable question chips. Then build your list:
    • Click Add to create a question.
    • Edit each question's text inline.
    • Use each question's switch to enable or disable it.
    • Click the trash icon to remove a question.
  9. Click Save Changes.
FAQ chips as quick prompts

FAQ Suggestions act as one-tap quick prompts on the home screen — a great way to guide visitors toward your most common questions and let the AI answer them instantly.

How to design the chat screen​

The chat screen is the conversation view where visitors send and receive messages. In the Screen card, select the Chat Screen tab.

Set the header​

  1. Toggle Use Company Name as Title on to show your company name in the chat header. To use something else, leave it off and type a custom Header Title.
  2. Check the Header Preview to confirm the title visitors will see.
  3. In Subtitle Text, enter a short line under the title (for example, Usually replies in minutes).

Set the messages​

  1. In Welcome Message, enter the first message shown to visitors.
  2. In Input Placeholder, enter the hint text inside the message box (for example, Type your message...).

Set header controls and features​

  1. Toggle Sound Toggle Button to show a mute/unmute control in the header.
  2. Under Message Features, toggle Read Receipts (show when messages have been read) and Message Animations (smooth fade-in effects).
  3. Under Input & Notifications, toggle the options you want:
    • File Uploads — let visitors send attachments.
    • Typing Indicator — show when the agent is typing.
    • Sound Notifications — play a sound for new messages.
    • Chat Transcript — let visitors download their chat history.
  4. Click Save Changes.

Next steps​