hero block

Banner card with optional logo, headline, subtitle, and CTA — for first-impression brand framing.

hero block

A banner-style card with logo, headline, subtitle, and a single prominent CTA button. Use it as the first thing visitors see at the top of the chat page.

When to use it

• Branded first impression on a public-facing agent (visibility: public).
• Pointing visitors at a primary external destination (docs, signup, app store) before they chat.
• Setting tone and audience expectation without burning a chat turn.

Shape

{
  "id": "hero-1",
  "type": "hero",
  "position": "above_chat",
  "headline": "Welcome to Acme Support",
  "subtitle": "Ask about setup, troubleshooting, or warranty.",
  "image_url": "https://cdn.example.com/acme-logo.png",
  "cta_label": "Read the docs",
  "cta_url": "https://docs.example.com"
}

Field	Required	Type	Notes
id	yes	string	Stable slug, unique.
type	yes	"hero"	Fixed.
position	no	enum	Default above_chat. sidebar works too and gives a vertical layout.
headline	yes	string	Big bold line. Schema rejects empty / missing.
subtitle	no	string	One-line elaboration.
image_url	no	string	64×64 thumbnail — falls back to no image if omitted.
cta_label	no	string	Button text. CTA renders only when BOTH cta_label and cta_url are set.
cta_url	no	string	External URL. Opens in a new tab.

Tips

• Pair with suggested_prompts below it so the visitor has both an external option (the CTA) and a chat-starting option (a chip).
• For multiple parallel CTAs use links instead — hero is intentionally single-CTA to avoid choice paralysis.
• Don’t repeat the agent name in the headline — it’s already in the page header.