Products & Surfaces

Widget theming and customization

Customize the chat widget’s appearance to match your brand with colors, fonts, positioning, and styling options.

Accessing theme settings

  1. Open your Product
  2. Select your chat Surface
  3. Go to the Ship tab
  4. On the chat widget style card, click Customize to open the Chat Style Editor

The Chat Style Editor has tabs for Generate (AI theme generation), Style (colors and typography), Design (layout and shape), and Configure (launcher and behavior).

Color customization

Control the widget’s color scheme:

  • Primary color — Buttons, links, and send button
  • Secondary color — Accents and hover states
  • Background color — Widget background
  • Text color — Message text
  • User message bubble — User’s message background
  • AI message bubble — AI response background

Enter hex codes or use the color picker to adjust each.

Typography

Customize fonts and text sizing:

  • Font family — System font, custom font, or Google Fonts
  • Font size — Base size for messages (14-18px recommended)
  • Font weight — Regular, medium, or semibold
  • Line height — Spacing between lines

For custom fonts, provide a font URL or use Google Fonts integration.

Widget positioning

In the Configure tab, set the launcher Position — where the chat launcher sits on the page, such as bottom-right or bottom-left.

Bubble and header styling

Adjust the chat bubble and header appearance:

  • Border radius — Rounded corners (0-24px)
  • Shadow — Drop shadow intensity
  • Avatar — Upload an image or use initials
  • Header text — Title shown in widget header
  • Welcome message — First message users see

Editing the theme directly

There is no free-form custom-CSS field. For control beyond the editor’s controls, set the widget’s theme by hand in your embed code. The theme is a structured object with three layers:

  • palette — raw design scales holding the actual values (hex colors, sizes): colors, spacing, typography, shadows, borders, and radius.
  • semantic — named tokens that reference the palette by string (for example, semantic.colors.primary points at palette.colors.primary.500), so they hold token-reference strings, not raw values.
  • components — per-component overrides for the button, input, launcher, panel, header, and message elements.

Because semantic tokens are references, set your brand colors at the palette layer. You only set the tokens you want to change; Runtype fills in the rest from the defaults. For example:

1{
2  "theme": {
3    "palette": {
4      "colors": {
5        "primary": { "500": "#262626" },
6        "accent": { "500": "#6366f1" }
7      },
8      "radius": { "sm": "6px" }
9    }
10  }
11}

The embed snippets Runtype generates already use this format, so copy one from the Ship tab as a starting point.

Mobile preview

The widget automatically adapts to mobile screens. To check how it looks, switch the preview between Desktop and Mobile using the device toggle in the preview toolbar.

Preview changes

See your changes in real-time with the preview panel:

  1. Make styling changes
  2. Check the preview on the right side
  3. Adjust until it looks correct
  4. Click Save to apply

The preview shows both light and dark mode versions.

Theme presets

Start with a pre-built theme preset and customize from there. Available presets include Clean, Midnight, Forest, Sunset, Ocean, Lavender, Noir, Rose, Cyberpunk, and Vintage.

Select a preset from the theme picker, then customize as needed.

AI-powered theming

Let Runtype generate a theme based on your brand. See AI-powered theme generation.

Next steps