Template Studio
The Template Studio is the visual editor for your agent's appearance. Open it from the Template tab inside any agent. Every part 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 layers radial 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 -- a pixel value (the default varies by preset)
- Font weight -- a numeric weight (inherits from your brand heading/body font by default)
- Color -- independent colors for the headline and subtitle; each preset sets sensible defaults (light text over a gradient, or your theme's text colors on the Minimal preset)
Headline and subtitle text fields support variable substitution for dynamic content.
Chat area
The chat area is where the conversation takes place. You can set:
- Background -- a color or image behind the message stream
- Agent and visitor bubbles -- the color and shape of each side's message bubbles
- Agent avatar -- the image (or initial) shown beside the agent's messages
(Fonts are set once under Branding, below.)
Quick replies
Quick replies are suggested prompt buttons that guide visitors toward common intents. You set:
- the chips themselves -- each with a label and an optional emoji
- a button style (for example, outline)
- whether chips stay visible after being clicked
Product cards
When the agent surfaces products from a connected catalog, they appear as styled cards. You can:
- Choose which fields show -- image, price, rating, description, and the CTA button
- Style the CTA button -- its label and color
- Style the card -- background, border, corner radius, and shadow
- Pick a layout -- standard, horizontal, compact, featured, spotlight, or minimal
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.