Runtype
Products & Surfaces

Setting up a chat Surface

A chat Surface turns your Flows and Agents into a ready-to-embed chat widget for your website. Your visitors get an AI-powered chat experience, and you control how it looks, behaves, and routes conversations from the Runtype dashboard.

Before you add a chat Surface, you need a Product with at least one Capability. A Capability is a Flow or Agent that handles user messages. If you still need to set that up, start with Creating and editing Flows or Creating and configuring Agents.

Getting started with the setup wizard

When you create a new Product with a Chat Surface, Runtype opens the Get Your Chat Live setup wizard with three steps:

  1. Configure your Agent — Set the system prompt, choose a model, and add any tools your Agent needs.

  2. Style your widget — Pick a theme preset or customize colors and styling to match your brand.

  3. Get your embed code — A Client Token is created automatically. Copy the embed code and add it to your site.

You can complete these steps in any order and return to them any time from the Surface panel.

Add a chat Surface to an existing Product

  1. Go to Products in the sidebar and open your Product.

  2. In the Surfaces section, click Add Surface.

  3. Select Chat as the Surface type.

  4. Click Save.

The Surface panel opens with tabs for configuring each part of your chat widget.

Configure your chat Surface

The Surface panel includes several tabs:

Overview

Use this tab to review your Surface status, attached Capabilities, and setup completeness before you go live.

Endpoints

This tab shows the API endpoints your chat widget uses to communicate with Runtype. Runtype manages these automatically, so no setup is required.

Orchestration

This tab controls how incoming messages are routed to your Capabilities. You can choose between two modes:

  • Single Orchestrator — One Capability handles all messages. This is the default and works well for most Products, especially if you only have one Capability.

  • Multi-Capability Router — An AI model reads each message and routes it to the best Capability automatically. You can choose the router model and optionally add a custom routing prompt.

Start with Single Orchestrator. You can switch to Multi-Capability Router later as your Product grows. For more detail, see Surface orchestration modes.

Auth

Use this tab to manage Client Tokens and domain restrictions for your chat widget.

Client Tokens authenticate your widget in client-side code. They are public by design, but you can restrict where they work with allowed origins.

  • Create or manage Client Tokens — Click Create Client Token or edit an existing token.

  • Set Allowed Origins — Add the domains that can embed your widget. You can use specific domains, wildcard subdomains, or localhost for local development.

  • Rotate a token — If a token is compromised, click Rotate Token to invalidate it immediately. Update your embed code right away because the old token stops working at once.

Ship

Use this tab to customize your widget and copy the embed code.

Widget Theming

  • Start with one of 12 built-in theme presets, or use AI-powered theme generation from a description or website URL.

  • Adjust colors, borders, launcher position, and chat bubble styling in the visual editor.

  • Add Custom CSS when you need full control.

  • Use the live preview to test changes before saving.

The preview updates instantly as you make changes, so you can experiment without affecting your live widget.

Embed code

Select or create a Client Token, then copy the embed code in one of these formats:

  • Script Tag — Paste the snippet before the closing </body> tag on any website.

  • React — Use the React component for tighter integration in React apps.

If you do not have a Client Token yet, the Ship tab prompts you to create one in the Auth tab first.

Next steps

Was this helpful?