Appearance

In Chatbot → Appearance, you match the widget to your brand: color, light or dark mode, assistant name, avatar and launcher visuals, how the launcher animates into view, and whether it sits on the left or right. Turn on Playground next to the Appearance heading to preview the chatbot while you adjust these settings. The widget supports LTR (left-to-right) and RTL (right-to-left) layouts.

Brand color

Choose a preset color or set a custom one. If you have a hex value, paste it into the hex input in the custom color picker.

Theme

Choose Light or Dark, or System so the chatbot follows each visitor’s device light or dark mode.

AI agent name

Set the label shown for your assistant in the chat header and related interface text.

AI avatar

On the free tier, two built-in styles are available: a minimal solid look with the AI label, or a bot icon.

PRO: Replace the defaults with your own artwork: paste SVG markup or upload an image. SVG avatars appear inside the gradient circle frame. An uploaded image replaces that frame entirely—useful when you already have a finished logo.

Chatbot launcher

The chatbot launcher is the floating control on the page edge that visitors use to open the chat. People often call it the chat button or launcher button.

Shape

Choose the launcher outline: full circle, oval, or circle with one non-round corner.

Icon

Choose one of seven built-in launcher icons.

Custom launcher (PRO)

Paste SVG markup for a custom icon. The SVG is tinted with your brand color inside the shape. Or upload an image; the plugin scales it down. The image is not auto-cropped to the launcher outline, so square or circular artwork usually looks best.

Button position

Use Chatbot position to anchor the widget on the left or right side of the screen.

Appearing animation

Choose how the launcher expands when it appears: Scale Smooth, Scale + Bounce, Slide Up, or Slide Right.

Chatbot position

Use Chatbot position to anchor the widget on the left or right side of the screen.

Playground

The Appearance screen also offers Playground. When you turn on the Playground toggle next to the Appearance heading, the chatbot playground opens on the same page so you can chat and review branding and layout as you work.

Layout direction (LTR and RTL)

The chatbot respects document direction and works in both left-to-right and right-to-left layouts.