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

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

Control where the widget appears:

• Position — Bottom-right, bottom-left, or custom coordinates
• Offset X/Y — Distance from edge in pixels
• Z-index — Layer order (for overlapping elements)

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

Advanced CSS customization

For complete control, add custom CSS in the theming panel. Custom CSS overrides theme settings. Test thoroughly to ensure your styles work across different screen sizes.

Editing the theme directly

The dashboard controls cover most needs, but you can also set the widget’s theme by hand in your embed code. The theme is a structured object with three layers:

• palette — raw design scales: colors, spacing, typography, shadows, borders, and radius.
• semantic — named tokens that reference the palette: primary, secondary, surface, accent, border, and more.
• components — per-component overrides for the button, input, launcher, panel, header, and message elements.

You only set the tokens you want to change; Runtype fills in the rest from the defaults. For example:

1
{
2
  "theme": {
3
    "semantic": {
4
      "colors": { "primary": "#262626", "surface": "#ffffff", "accent": "#6366f1" }
5
    },
6
    "palette": { "radius": { "sm": "6px" } }
7
  }
8
}

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

Mobile responsiveness

The widget automatically adapts to mobile screens, but you can customize mobile behavior:

• Hide on mobile — Don’t show the widget on small screens
• Full-screen on mobile — Expand widget to fill screen
• Mobile breakpoint — Screen width where mobile styles activate

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

• AI-powered theme generation
• Embedding the chat widget (script tag)
• Client tokens and domain restrictions