For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dashboard
User GuideDeveloper GuidesAPI Reference
User GuideDeveloper GuidesAPI Reference
  • Getting Started
    • What is Runtype?
    • Creating your account
    • Platform Keys vs. BYOK
    • Understanding the Runtype UI
    • Quickstart: Social Media Post Generator
    • Quickstart: From Agent to Chat Widget
  • Dashboard
    • What is the Dashboard?
    • Daily Executions
  • Playground
    • What is the Playground?
  • Products & Surfaces
    • What are Products?
    • What are Surfaces?
    • Creating a Product
    • Setting up a Chat Surface
    • Setting up an API Surface
    • Setting up an MCP Surface
    • Setting up an A2A Surface
    • Setting up a Slack Surface
    • MCP authentication
    • Authenticating with product API keys
    • Embedding the chat widget (script tag)
    • Embedding the chat widget (React)
    • Surface orchestration modes
    • Product views
    • Adding Capabilities to a product
    • Connecting external agents
    • How A2A works
    • Connecting to Cursor / VS Code
    • Connecting to Claude Desktop
    • Scoping API keys to capabilities
    • Auto-generated OpenAPI spec
    • Calling your API endpoints
    • Client tokens and domain restrictions
    • AI-powered theme generation
    • Widget theming and customization
    • Product versioning and status
  • Flows
    • What are Flows?
    • Creating and Editing Flows
    • Flow step types overview
    • Agent and Flow Templates
    • Using prompt steps
    • Using transform-data steps
    • Using conditional steps
    • Using fetch-url and api-call steps
    • Using record steps (upsert/retrieve)
    • Flow variables and templates
    • Flow versioning and publishing
    • Running flows in batch
    • Handling batch failures
    • Debugging flows
  • Agents
    • What are Agents?
    • Creating and configuring Agents
    • Agent tools
  • Records
    • What are Records?
    • Creating and managing records
    • Using records in flows
    • Filtering and searching records
  • Tools
    • What are Tools?
    • Built-in Tools
    • Creating custom tools
    • Creating external tools
    • Runtime tools
  • Evals
    • What are Evals?
    • Running an Eval
    • Interpreting eval results
  • Schedules
    • What are Schedules?
    • Automating batch processing
  • Logs
    • What are Logs?
    • Working with Logs
  • Integrations
    • Connecting AI model providers
    • Slack integration
    • Google Workspace integration
    • GitHub integration
    • Linear integration
    • Weaviate (vector search)
    • Firecrawl (web scraping)
    • Exa (web search)
  • Settings
    • What's in Settings?
    • Available AI models
    • What are Organizations?
    • Managing AI models
    • Managing API keys
    • Billing and plans
    • Usage data
    • Team members and permissions
    • Appearance and preferences
    • Integrations (PostHog, Weaviate, Daytona)
  • Troubleshooting & FAQ
    • FAQ
    • Rate Limits and Usage
    • Managing Runtype with Claude
    • Flow execution failures
    • Common errors and solutions
    • Authentication issues
Dashboard
LogoLogo
On this page
  • Accessing theme settings
  • Color customization
  • Typography
  • Widget positioning
  • Bubble and header styling
  • Advanced CSS customization
  • Mobile responsiveness
  • Preview changes
  • Theme presets
  • AI-powered theming
  • Next steps
Products & Surfaces

Widget theming and customization

Was this page helpful?
Previous

Product versioning and status

Next
Built with

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.

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 Runtype, 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