# Style and behavior

Control your agent widget's appearance and behavioral rules from the dashboard, with a live preview.

<Mermaid chart={`flowchart LR
    subgraph "Style & Behavior"
        A["Visual style<br/>colors, icon, position"]
        B["Behavior<br/>tone, reasoning, role"]
        C["Starters<br/>quick-start prompts"]
        D["Voice<br/>speech I/O config"]
    end
    A --> P["Agent"]
    B --> P
    C --> P
    D --> P
    P --> T["Test in Playground"]
    style P fill:#1842ef,stroke:#1842ef,color:#ffffff
    style T fill:#e8ecff,stroke:#1842ef,color:#0a0e1a
`} />

**Path:** Agent Studio → Style & Behavior

Style & Behavior controls the visual appearance and behavioral rules for your agent widget. Changes here affect the live widget immediately after saving. The page is organized into tabs, with a live **Preview** panel on the right that shows how the widget looks as you edit — toggle between Button, Input, and Chat views to preview each state.

:::note[The dashboard sets the defaults — code can override them]
Everything you configure here is the baseline look and feel. Developers can override any of it at runtime through the SDK, so the widget can match a specific page, theme, or signed-in user. The dashboard is where non-developers own the agent's appearance and tone; the SDK is the escape hatch when a surface needs something different. See the Developer Guide: [Appearance & greeting](/customize/appearance/), [Theme](/customize/theme/), and [SDK configuration](/customize/configuration/).
:::

## Style tab

| Setting | What it controls |
| :--- | :--- |
| **Agent name** | The name displayed in the widget header |
| **Primary color** | The main brand color of the widget |
| **Agent icon** | The icon shown on the widget button |
| **Position** | Where on screen the widget appears (e.g., Middle Right) |
| **Border colors** | Rotating border colors on the widget button |
| **Show Sparkles** | Animated sparkle effect on the button |
| **Prompt hint** | Placeholder text in the chat input |
| **Chat font** | Typeface for all chat text |
| **Font size** | Base font size in pixels |
| **Allow dragging** | Whether users can reposition the widget |

## Behavior & Responses tab

Controls how the agent responds — tone, verbosity, what to do when it doesn't know an answer, and escalation triggers.

## Starters tab

Configure the starter prompts shown when a user first opens the agent. These are the suggested questions displayed before the user types anything.

## Data Access & Handoff tab

Controls what user data the agent can access (e.g., subscription plan, account details passed via the embed code) and the conditions under which it hands off to a human agent.

:::note[Handoff destinations]
The forwarding destination for a human handoff (email, HubSpot, or webhook) is configured in [Integrations](/user-guides/integrations/).
:::

## Voice tab

Configure voice input/output settings if you're using the voice-enabled widget.

## Model tab

Choose the underlying AI model and configure inference settings (temperature, max tokens).

Once Style & Behavior is configured, test it in the [Playground](/user-guides/playground/).