Component Demo Page

Q: Does the schema render?

Yes. Check the page source for the application/ld+json block with FAQPage type.

Q: Can I have HTML in answers?

Yes — answers are piped through | safe so you can include links , bold , and other HTML.

Q: How many questions per page?

The PO spec says 8 for spoke pages (5 topic + 3 master) and 5 for hub pages. But the component accepts any number.

Every reusable component and layout block, rendered on one page for review.

Start Your Free Trial 30 days free. No credit card.

Hi, can I return the headphones I ordered last week?

@Shopify · Get Order

Order #4891 — SoundCore Q45 Wireless Headphones, ordered Feb 19, status: Fulfilled

I found your order! The SoundCore Q45 is within the 30-day return window. Would you like me to start the return process?

Yes please.

@Stripe · Create Refund

Refund of £79.99 initiated to Visa ending 4242. Expected: 5–7 business days.

Done! Your refund of £79.99 has been initiated. You'll see it on your Visa ending 4242 within 5–7 business days. I've emailed you a prepaid return label.

C6: Automation Steps

Step 1: Understand

Hay reads the customer message and identifies the intent — return request, order query, product question. It extracts key entities like order numbers and product names.

Integration: Hay NLU

C4: Integrations CTA (spoke — one hero)

Platform spoke variant with Shopify as the hero logo, secondary and dimmed tiers.

View all integrations →

C4-lite: Integrations CTA (hub — all equal)

Hub page variant with all integrations displayed equally.

View all integrations →

C7: Knowledge Training

Step 1

Upload your docs

Drag and drop your return policies, product guides, and shipping info. Hay accepts PDF, DOCX, and HTML — or crawl your help centre directly.

Designer visual placeholder

Step 2

Control what Hay knows

Categorise documents, set visibility, and toggle which ones your AI agent can access. You decide what Hay can and can't reference.

Designer visual placeholder

Step 3

Keep it current

Update documents anytime — Hay always uses the latest version. Search your knowledge base to find and edit any document in seconds.

Designer visual placeholder

C8: Data Insights

78% auto-resolved

Auto-resolved 78% Escalated 14%

Escalation reasons

Action unavailable in API 45%

Customer requested human 30%

Below confidence threshold 25%

C2: Exploded UI

Annotated playbook editor — image placeholder shown when no screenshot is provided.

Playbook editor screenshot

Natural language trigger

Define when this playbook fires using plain English.

@Shopify Get Order

Pulls order details directly from your Shopify admin.

@Stripe Create Refund

Processes the refund through Stripe when conditions are met.

Escalation rules

Routes to your team when confidence is low or the customer asks for a human.

Confidence threshold

Set the minimum confidence level for auto-resolution vs escalation.

C5 Strong: The closing pitch with trust elements and dark background.

This variant includes trust elements, a demo link, and full visual weight.

Start Your Free Trial or book a demo

30-day free trial No credit card required Set up in under 10 minutes Early adopter pricing: 50% off for life

C1: FAQ Accordion

Is this a real FAQ?

No — this is a demo page showing the FAQ component with accordion toggle and FAQPage schema markup.

Does the schema render?

Can I have HTML in answers?

How many questions per page?

Two Column — image right (default)

This block places text on the left and an image on the right. Useful for feature explanations, product shots, or diagrams.

Supports HTML content, optional heading, and background variants (white, light, dark).

Two Column — image left, light background

Same block with imagePosition: 'left' and background: 'light'. The image and text columns swap.

Three Cards

Each card has a title, description, and optional SVG icon path.

Fast setup

Connect your tools and go live in under 10 minutes. No engineering time required.

Real actions

Hay doesn't just answer questions — it executes refunds, looks up orders, and updates tickets.

Full control

Set confidence thresholds, escalation rules, and business logic. You define what Hay can do.

Three Cards — no icons

Card without icon

Cards work without icons too. Just omit the icon field.

Minimal variant

Good for text-heavy content blocks or testimonial summaries.

Flexible layout

Works on any page — solutions, integrations, homepage sections.

Text Block — centered

A simple full-width text section with optional heading. Useful for introductions, explanations, or transitional content between heavier components.

Supports background (white, light, dark), align (left, center), and maxWidth (narrow, medium, wide).

Stat Row

177

Automated actions

Integrations

<2 min

Avg. response time

78%

Auto-resolution rate

Zendesk actions

Stripe actions

WooCommerce actions

Component Demo Page

C6: Automation Steps

Step 1: Understand

Step 2: Query

Step 3: Validate

Step 4: Act

Step 5: Escalate

C4: Integrations CTA (spoke — one hero)

C4-lite: Integrations CTA (hub — all equal)

C7: Knowledge Training

Upload your docs

Control what Hay knows

Keep it current

C8: Data Insights

Escalation reasons

Query breakdown by type

Monday spike in pre-shipment queries

Size questions reduce returns

C2: Exploded UI

Natural language trigger

@Shopify Get Order

@Stripe Create Refund

Escalation rules

Confidence threshold

C5 Strong: The closing pitch with trust elements and dark background.

C1: FAQ Accordion

Layout Blocks

Two Column — image right (default)

Two Column — image left, light background

Three Cards

Fast setup

Real actions

Full control

Three Cards — no icons

Card without icon

Minimal variant

Flexible layout

Text Block — centered

Text Block — dark background

Stat Row