Template Studio
The Template Studio is the visual editor for your agent's appearance. Open it from the Template tab inside any agent. Every visual aspect of the agent experience -- hero section, chat area, quick replies, product cards, and branding -- is configured here.
Hero Section
The hero is the top banner of your agent experience, displayed before the conversation begins. Template Studio ships with seven preset layouts, each with different defaults for typography, spacing, and content alignment.
Preset Types
| Preset | Description |
|---|---|
| Centered | Classic centered layout with headline and subtitle stacked in the middle |
| Left Aligned | Text aligned to the left, positioned toward the bottom of the hero |
| Bold Gradient | Dramatic multi-glow radial gradient with large bold typography (weight 800) |
| Minimal | Clean layout with generous whitespace, uses the surface color as background instead of a gradient |
| Glass Card | Frosted glass panel with backdrop blur, centered in the hero area |
| Wave | Gradient background with a curved SVG wave at the bottom edge |
| Image Carousel (custom) | Full-bleed image slides -- use this for fully custom hero content |
Alignment
Each preset has a default text alignment, but you can override it. The three options are:
- Left -- content aligned to the start
- Center -- content centered horizontally
- Right -- content aligned to the end
Background Types
The hero background can be one of three types:
Gradient -- A linear gradient between two colors. Direction options:
- Diagonal (down-right or up-right)
- Right
- Down
- Left
- Up
The Bold Gradient preset adds radial gradient overlays on top of the linear gradient for a multi-glow effect.
Image -- A background image (provide a URL). An overlay color and opacity can be set to ensure text remains readable over the image.
Video -- A background video (provide a URL). Plays automatically, muted, and looped. Same overlay controls as image backgrounds.
Animations
Choose an entrance animation for the headline and subtitle text:
| Animation | Effect |
|---|---|
| None | No animation, text appears immediately |
| Fade In | Text fades in from transparent |
| Slide Up | Text slides upward while fading in |
| Scale In | Text scales up slightly while fading in |
| Typewriter | Headline types out character by character with a blinking cursor, subtitle reveals after |
| Glow Pulse | Headline pulses with a soft glow, subtitle fades in after |
Typography
Both the headline and subtitle have independent typography controls:
- Font size -- pixel value (defaults vary by preset, e.g., Centered defaults to 32px headline, Bold Gradient to 40px)
- Font weight -- numeric weight (inherits from your brand heading/body font weight by default)
- Color -- headline defaults to white (
#fff), subtitle defaults to semi-transparent white (rgba(255,255,255,0.8)); the Minimal preset defaults to your theme text colors instead
Headline and subtitle text fields support variable substitution for dynamic content.
Chat Area
The chat area is where the conversation takes place. Configurable properties include:
- Background color -- the color behind the message stream
- Agent bubble color -- the background color of messages sent by the agent
- User bubble color -- the background color of messages sent by the visitor
- Font family -- the typeface used for message text
- Agent avatar -- an image displayed next to agent messages in the chat header
- Agent name -- the display name shown in the chat header
Quick Replies
Quick replies are suggested prompt buttons shown to users at the start of a conversation or at specific journey steps. They help guide visitors toward common intents.
Styling options:
- Text color and background color for the buttons
- Border radius -- control how rounded the button corners are
- Layout -- how the buttons are arranged in the chat area
Product Cards
When the agent recommends products (from a connected product catalog), the recommendations appear as styled cards. Configurable properties include:
- Image -- product image display and aspect ratio
- Title -- product name styling
- Description -- truncation and font settings
- Price -- formatting and emphasis
- CTA button -- label, color, and border radius
Layout options for product cards:
- Carousel -- horizontal scrollable row
- Grid -- multi-column layout
- List -- vertical stack
Branding
Global brand settings that apply across the entire agent experience:
- Logo -- upload your brand logo, displayed in the widget header
- Primary color -- the dominant brand color used for buttons, links, and accents
- Secondary color -- a complementary color used in gradients and backgrounds
- Accent color -- used for highlights, hover states, and decorative elements
- Heading font -- the typeface for headlines and section titles, with weight control
- Body font -- the typeface for body text and messages, with weight control
Device Preview
Use the device switcher to preview how your agent looks across screen sizes:
- Phone -- mobile viewport
- Tablet -- tablet viewport
- Desktop -- full-width viewport
The preview updates in real time as you change settings, so you can see the effect of every adjustment immediately.
Saving Changes
Changes made in Template Studio are saved as a draft. They do not affect the live agent until you explicitly publish.
To go live with your changes, navigate to Settings > Deploy > Publish and confirm the deployment. This pushes all draft template changes to the production widget.