10 components. Every assembly draws on them.
When a visitor arrives, Spectare selects atoms from your library and maps each one to a component. The left panel shows the atom you write. The right panel shows what the visitor sees.
Rendering is optional
Every component on this page arrives as structured JSON, never HTML: the renderer you see here is a convenience, not a requirement. Each section below includes the same content as headless JSON, the shape returned when you pass "format": "flat" to the assembly API, so you can render it with your own design system. Headless rendering docs.
AnnouncementBar
A single line above everything else, with an optional link. Reserved for one genuinely time-limited fact; the text is copied from an atom, never invented, and anything over 120 characters is dropped rather than shown.
audiences: any · stages: any
Input: atom content
headline
Early-bird pricing ends Friday
body
Sign up before Friday 20 September and lock the Starter plan at the early-bird rate for twelve months. After Friday the standard rate applies.
valid until
2026-09-20
Output: rendered component
Announcements resolve per request, outside the assembly cache, so the bar disappears the moment its validity window closes.
▸Headless JSON (format: "flat")
{
"announcement": {
"text": "Early-bird pricing ends Friday: lock the Starter rate for twelve months.",
"link": {
"label": "Sign up",
"href": "/signup?plan=starter"
}
}
}ImageCtaHero
A full-width image (16:9 ratio) with a dark gradient overlay. Claude generates the headline, subheading, and CTA label. The image URL and CTA link are resolved server-side.
audiences: any · stages: any
Input: atom content
headline
See your website the way every visitor does
subheading
Spectare adapts your content in real time based on who is visiting.
ctaLabel
Start free trial
Output: rendered component
In production, src and ctaHref are resolved server-side. Claude only writes the headline, subheading, and ctaLabel.
▸Headless JSON (format: "flat")
{
"hero": {
"headline": "See your website the way every visitor does",
"subheading": "Spectare adapts your content in real time based on who is visiting.",
"image": {
"src": "https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&h=1080&fit=crop",
"alt": "Spectare dashboard showing personalised content assembly"
},
"cta": {
"label": "Start free trial",
"href": "https://spectare.ai/signup"
},
"atomIds": []
}
}CtaStrip
A prominent call to action with a short headline and one or two buttons. Always placed last.
audiences: any · stages: consideration, decision
Input: atom content
headline
Start personalising your website
body
Free 14-day trial. One script tag or WordPress plugin. No card required.
cta primary
Start free trial → /signup?plan=trial
cta secondary
See the live demo → /demo/landing
Output: rendered component
Start personalising your website today
▸Headless JSON (format: "flat")
{
"cta": {
"headline": "Start personalising your website today",
"primary": {
"label": "Start free trial",
"href": "/signup?plan=trial"
},
"secondary": {
"label": "See the live demo",
"href": "/demo/landing"
},
"atomIds": []
}
}HeroStatement
A large bold claim or value proposition with a supporting sentence. Always placed first.
audiences: any · stages: any
Input: atom content
headline
Every visitor gets a different page
body
Spectare reads where visitors came from, classifies their intent in under 50 milliseconds, and assembles a personalised page from your atom library. No rules to write, no segments to define.
Output: rendered component
Every visitor gets a different page
Spectare reads referrer and UTM signals, classifies intent in under 50ms, and assembles a personalised experience from your atom library. No rules. No segments. No A/B tests.
▸Headless JSON (format: "flat")
{
"hero": {
"headline": "Every visitor gets a different page",
"subheading": "Spectare reads referrer and UTM signals, classifies intent in under 50ms, and assembles a personalised experience from your atom library. No rules. No segments. No A/B tests.",
"atomIds": []
}
}AtomCard
Renders atom content as title and body prose. The default component when no specialist type fits.
audiences: any · stages: any
Input: atom content
headline
What is an atom?
body
An atom is one focused piece of content: a feature explanation, a pricing block, a FAQ, a case study. You write atoms in the Spectare admin. Spectare assembles the right combination for each visitor and renders them as structured UI components.
Output: rendered component
What is an atom?
An atom is one focused piece of content: a feature explanation, a pricing block, a FAQ, a case study. You write atoms in the Spectare admin. Spectare assembles the right combination for each visitor and renders them as structured UI components.
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "text",
"title": "What is an atom?",
"content": "An atom is one focused piece of content: a feature explanation, a pricing block, a FAQ, a case study. You write atoms in the Spectare admin. Spectare assembles the right combination for each visitor and renders them as structured UI components.",
"collapsed": false,
"atomIds": []
}
]
}StatGrid
A horizontal row of 2 to 4 key numbers with short labels. Anchors credibility with measurable claims.
audiences: any · stages: consideration, decision
Input: atom content
headline
Performance that does not slow you down
body
Spectare classifies visitor intent in under 50ms. Cached assemblies for returning patterns serve in under 50ms with no AI calls. Fresh assemblies for new patterns complete in around 400ms.
keyStats
50ms qualify latency, 400ms fresh assembly, 50ms cached, 50 free/month
Output: rendered component
qualify latency
50ms
fresh assembly
400ms
cached
50ms
free per month
50
Typical latency figures from the Spectare assembly pipeline
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "stats",
"stats": [
{
"value": "50ms",
"label": "qualify latency"
},
{
"value": "400ms",
"label": "fresh assembly"
},
{
"value": "50ms",
"label": "cached"
},
{
"value": "50",
"label": "free per month"
}
],
"caption": "Typical latency figures from the Spectare assembly pipeline",
"atomIds": []
}
]
}CodeBlock
A syntax-highlighted code snippet with optional caption. Appears when the content carries a concrete integration example.
audiences: any · stages: consideration, decision
Input: atom content
headline
Add Spectare to any site
body
One script tag is all you need. Add it to your page, set data-org to your organisation slug, and Spectare starts personalising immediately. No build step, no SDK, no configuration.
intent keywords
integration, setup, script tag, installation
Output: rendered component
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "code",
"code": "<script\n src=\"https://spectare.ai/spectare.js\"\n data-org=\"your-slug\"\n async\n></script>",
"lang": "html",
"caption": "Add to <head> or before </body>",
"atomIds": []
}
]
}ComparisonTable
Side-by-side feature comparison against a named competitor or approach. Used when a visitor is evaluating alternatives.
audiences: any · stages: consideration, decision
Input: atom content
headline
Spectare vs A/B testing
body
A/B testing splits traffic between fixed variants and waits weeks for statistical significance. Spectare assembles a unique experience for each visitor from the moment they arrive.
competitor
A/B testing
Output: rendered component
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "comparison",
"competitor": "A/B testing",
"rows": [
{
"label": "Setup",
"spectare": "Write atoms once, no variants",
"them": "Define variants per page"
},
{
"label": "Time to live",
"spectare": "Minutes",
"them": "Weeks to significance"
},
{
"label": "Personalisation",
"spectare": "Individual visitor level",
"them": "Fixed segment buckets"
},
{
"label": "Content management",
"spectare": "Central atom library",
"them": "Duplicate pages per variant"
},
{
"label": "Analytics",
"spectare": "Atom-level attribution",
"them": "Variant conversion rates"
}
],
"atomIds": []
}
]
}FeatureList
A compact bulleted list of 3 to 6 features or benefits. The scannable alternative to a second block of prose.
audiences: any · stages: awareness, consideration
Input: atom content
headline
What you get with Spectare
body
Spectare handles the full personalisation workflow: intent classification, content selection, component assembly, and conversion attribution.
Output: rendered component
- ✓
Intent classification in under 50ms
Reads referrer, UTM parameters, and page context. No cookies, no personal data stored.
- ✓
Atom library with vector search
Write content once. Spectare finds the right combination for each visitor automatically.
- ✓
Structured component assembly
A registry of component types: announcement, hero, atom card, stats, features, code, comparison, testimonial, image hero, and CTA.
- ✓
Conversion attribution by atom
See which atoms convert which audiences at which stage of the buying journey.
- ✓
One script tag or WordPress plugin
No developer needed after initial setup. Free 14-day trial.
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "list",
"items": [
{
"text": "Intent classification in under 50ms",
"sub": "Reads referrer, UTM parameters, and page context. No cookies, no personal data stored."
},
{
"text": "Atom library with vector search",
"sub": "Write content once. Spectare finds the right combination for each visitor automatically."
},
{
"text": "Structured component assembly",
"sub": "A registry of component types: announcement, hero, atom card, stats, features, code, comparison, testimonial, image hero, and CTA."
},
{
"text": "Conversion attribution by atom",
"sub": "See which atoms convert which audiences at which stage of the buying journey."
},
{
"text": "One script tag or WordPress plugin",
"sub": "No developer needed after initial setup. Free 14-day trial."
}
],
"atomIds": []
}
]
}TestimonialCard
A customer quote with name, role, and optional company. The quote is copied verbatim from your content, never paraphrased.
audiences: any · stages: consideration
Input: atom content
headline
Sarah Chen testimonial
body
We stopped spending weeks setting up A/B tests. Now we write atoms and Spectare figures out the rest. Our conversion rate on paid traffic is up 34% in six weeks.
attribution
Sarah Chen, VP Marketing, Acme SaaS
Output: rendered component
"We stopped spending weeks setting up A/B tests. Now we write atoms and Spectare figures out the rest. Our conversion rate on paid traffic is up 34% in six weeks."
Sarah Chen
VP Marketing, Acme SaaS
Size: half. Pairs with another half-width component in a live assembly (see pairing demo below).
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "quote",
"quote": "We stopped spending weeks setting up A/B tests. Now we write atoms and Spectare figures out the rest. Our conversion rate on paid traffic is up 34% in six weeks.",
"name": "Sarah Chen",
"role": "VP Marketing",
"company": "Acme SaaS",
"atomIds": []
}
]
}Half-width pairing
When two consecutive half-width components appear in an assembly, they are placed side by side automatically. No layout configuration needed.
Assembly JSON
[
{
"component": "TestimonialCard",
"size": "half"
},
{
"component": "AtomCard",
"size": "half"
}
]Rendered side by side
"Spectare replaced three separate A/B testing tools. We ship personalised experiences for every campaign now without touching code."
Marcus Webb
Head of Growth, Relay
Privacy first
▸Headless JSON (format: "flat")
{
"sections": [
{
"kind": "quote",
"quote": "Spectare replaced three separate A/B testing tools. We ship personalised experiences for every campaign now without touching code.",
"name": "Marcus Webb",
"role": "Head of Growth",
"company": "Relay",
"atomIds": []
},
{
"kind": "text",
"title": "Privacy first",
"content": "No cookies. No personal data. Spectare reads only the HTTP referrer, UTM parameters in the URL, and the text of the current page. Nothing is stored on the visitor's device.",
"collapsed": false,
"atomIds": []
}
]
}Page templates
The components above furnish a page you already have. When Spectare builds a whole page, answering a typed question on Ask, it picks one of seven page templates to match the question’s shape and fills its slots with whole atoms.
explainer
What is X? How does it work?
comparison
X versus Y, which should I pick?
faq
A cluster of related questions
howto
How do I set this up?
pricing
What does it cost?
landing
A first visit with broad intent
showcase
Show me what it can do
slots
Every template fills primary, supporting and secondary slots with whole atoms.
See one assembled live: ask a question and watch the explainer template build itself →