Widget appearance

Icon, title, colors, and input placeholder — the visible pieces of the chat widget.

The widget is the public face of your chatbot on the web. Spending 10 minutes here pays off every conversation.

Where to find it

Open your chatbot → Widget in the sub-nav. The page is two columns: form on the left, live preview on the right.

┌─ Widget ──────────────────────────────┐ ┌─ Preview ─────┐
│                                       │ │               │
│  Icon                                  │ │    [icon] Chat│
│  [ Upload icon ]                       │ │    ─────────  │
│                                       │ │    Hello, how │
│  Content                               │ │    can I help │
│    Widget Title     [ Chat          ]  │ │    you?       │
│    Initial Message  [ Hello, how...]   │ │               │
│    Input Placeholder[ Ask anything…]   │ │    [ Ask me   │
│    Suggested Msgs   [ line 1\nline 2 ] │ │      anything ]│
│                                       │ │               │
│  Colors                                │ └───────────────┘
│    Primary    Secondary    Background │
│    [#4F46E5]  [#E2F7CB]    [#F9FAFB]  │
│                                       │
│  [✓] Show "Powered by ChatbotGen"     │
│                                       │
│  [ Save Widget Settings ]              │
└───────────────────────────────────────┘

Icon

Upload a square image. The icon appears in:

  • The launcher button on your site (bottom-right)
  • The widget header next to the title
  • Each assistant message bubble

Accepted types: PNG, JPEG, WebP. Max size: 5 MB. Client-side validations:

  • Wrong type → "Use a PNG, JPEG, or WEBP image."
  • Too large → "Image must be 5MB or smaller."

Transparent PNGs work well. Avoid thin line art — it's unreadable at 40 px.

Widget Title

The text shown in the widget header. Default placeholder: Chat. Keep it short.

Initial Message

The first message the chatbot sends when a visitor opens the widget. Two-row textarea, helper text "Supports multiple lines". Default: "Hello, how can I help you?"

Input Placeholder

The grey hint in the message input box. Default: "Ask me anything...".

Suggested Messages

One message per line in a 3-row textarea. Helper text: "One message per line — shown as quick-reply chips". Shown next to the initial message as clickable buttons. Picking one sends that message as the user input.

Good suggestions match your top real questions. Rotate them based on what conversations you're seeing.

Colors

Three color pickers with hex inputs:

  • Primary (default #4F46E5) — CTAs, accents, send button
  • Secondary (default #E2F7CB) — supporting accents
  • Background (default #F9FAFB) — chat body background

The live preview updates instantly. Defaults are chosen for legible contrast — if you swap them out, eyeball the preview to make sure text stays readable.

Branding toggle

The Show "Powered by ChatbotGen" checkbox controls the widget footer. On Free plans it's locked on — see Branding.

Saving

Outside the wizard, a Save Widget Settings button sits at the bottom of the form. Inside the wizard, the top banner's Next button saves + advances for you. Changes propagate to live widgets within a few seconds.

What's on other pages

← Previous
Retraining
Next →
Messages & prompts