Features — Chat Panel — SideButton Marketing Website Knowledge Module

What This Is

Feature page for the SideButton AI Chat Panel — the built-in chat interface that lets users talk to AI on any website. Uses the shared FeatureHero component with "Works on any website" badge (primary/teal color). Showcases 6 capability cards via CapabilityList component (2-column grid), 4-step "How It Works" with numbered step cards and connecting gradient lines, Privacy & Control section with 4 benefit cards (inline SVG icons), LLM providers row (4 emoji icons: Claude, ChatGPT, Ollama, Any LLM), Related Features 3-card grid, and dark CTA with Chrome Web Store install link. Includes HowTo and BreadcrumbList JSON-LD schemas for SEO.

URL Patterns

Pattern	Description
/features/chat	Chat feature page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Works on any website" (teal/primary)      |
|   H1: "SideButton AI Assistant"                     |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. CAPABILITIES — CapabilityList component]         |
|   "What can you do?" heading                        |
|   2×3 grid of capability cards                      |
|   Each: SVG icon + title (h3) + example prompt      |
|   Navigate | Read/summarize | Fill forms |          |
|   Extract data | Create tickets | Draft messages    |
|                                                     |
| [3. HOW IT WORKS — custom section, bg-slate-50]     |
|   "How it works" heading                            |
|   4-column grid (md:grid-cols-4)                    |
|   Each: numbered circle + title + description       |
|   Gradient connecting lines between steps (desktop) |
|   1. Open chat panel                                |
|   2. Ask in plain English                           |
|   3. AI reads the page                              |
|   4. Watch it happen                                |
|                                                     |
| [4. PRIVACY & CONTROL — custom section]             |
|   "Privacy & Control" heading                       |
|   2×2 grid of benefit cards (md:grid-cols-2)        |
|   Each: inline SVG icon + title + description       |
|   Runs locally | You approve | Open source | Any LLM|
|                                                     |
| [5. LLM PROVIDERS — bg-slate-50]                    |
|   "Works with your favorite AI" heading             |
|   4 provider icons in flex-wrap row (opacity-70)    |
|   Each: emoji in white box + label below            |
|   Claude | ChatGPT | Ollama | Any LLM              |
|                                                     |
| [6. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   Browser MCP | AI Automation | Integrations        |
|                                                     |
| [7. CTA — FeatureCTA component, bg-slate-900]       |
|   "Start chatting with any website"                 |
|   "Install Free Extension" -> Chrome Web Store      |
|   "View Documentation" -> docs home                 |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	section.relative.overflow-hidden (first)	FeatureHero with radial gradient background
Background gradient	.bg-gradient-radial	primary/20 radial gradient, 800x400px
Grid pattern	.bg-grid-pattern	40px grid, opacity 0.02
Badge	.inline-flex.items-center.gap-2.rounded-full	"Works on any website", teal color (bg-primary/10 text-primary border-primary/20)
Badge dot	span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse	Pulsing teal dot
Hero heading	h1 "SideButton AI Assistant"	text-4xl md:text-5xl lg:text-6xl tracking-tight
Hero subtitle	p "Your AI assistant for any website..."	text-lg md:text-xl text-slate-600
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary text-white, shadow-lg shadow-primary/25
Documentation	a[href*="docs.sidebutton.com"] (outline)	bg-white border border-slate-200

Capabilities Section (CapabilityList component)

Element	Selector	Notes
Section	section.py-16 (CapabilityList, first)	White background
Section heading	h2 "What can you do?"	text-2xl md:text-3xl
Subtitle	p "Just type what you want in plain English"	text-slate-600
Grid	.grid.md\\:grid-cols-2.gap-4	2-column layout
Navigate card	Card containing h3 "Navigate anywhere"	navigate icon, quote: "Go to my LinkedIn inbox..."
Read/summarize card	Card containing h3 "Read and summarize"	extract icon, quote: "What's this page about?..."
Fill forms card	Card containing h3 "Fill forms and click buttons"	click icon, quote: "Fill this application..."
Extract data card	Card containing h3 "Extract data to clipboard"	data icon, quote: "Copy all email addresses..."
Create tickets card	Card containing h3 "Create tickets and tasks"	workflow icon, quote: "Make a Jira ticket..."
Draft messages card	Card containing h3 "Draft emails and messages"	type icon, quote: "Write a friendly reply..."
Card container	.flex.items-start.gap-4.p-4.bg-white.rounded-xl.border.border-slate-100	hover:border-slate-200 transition
Card icon	.w-10.h-10.bg-gradient-to-br.from-primary\\/10.to-primary\\/5.rounded-lg	Primary color SVG icon

How It Works Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (How It Works)	Slate background
Section heading	h2 "How it works"	text-2xl md:text-3xl
Subtitle	p "Four simple steps to AI-powered browsing"	text-slate-600
Step grid	.grid.md\\:grid-cols-4.gap-6	4-column on desktop
Step number circle	.w-16.h-16.bg-primary\\/10.rounded-2xl	Contains bold number in primary color
Connecting line	.hidden.md\\:block.absolute.top-8.left-\\[60%\\]	Gradient line from primary/30 to transparent, between steps 1-3
Step 1	h3 "Open the chat panel"	"Click the SideButton icon on any website..."
Step 2	h3 "Ask in plain English"	"Type what you want to do..."
Step 3	h3 "AI reads the page"	"The AI sees the page content..."
Step 4	h3 "Watch it happen"	"AI takes action and shows you the results instantly."

Privacy & Control Section

Element	Selector	Notes
Section	section.py-16 (Privacy)	White background
Section heading	h2 "Privacy & Control"	text-2xl md:text-3xl
Subtitle	p "Your data stays yours. Always."	text-slate-600
Grid	.grid.md\\:grid-cols-2.gap-4	2-column layout
Runs locally card	Card containing h3 "Runs locally"	Shield SVG icon, "Everything runs on your machine..."
Approve actions card	Card containing h3 "You approve every action"	Eye SVG icon, "Review what AI wants to do..."
Open source card	Card containing h3 "Open source"	Code SVG icon, "Inspect every line of code..."
Any LLM card	Card containing h3 "Works with any LLM"	Server SVG icon, "Use Claude, ChatGPT, or self-host with Ollama..."
Card container	.flex.items-start.gap-4.p-5.bg-white.rounded-xl.border.border-slate-100	hover:border-slate-200 transition
Card icon area	.w-10.h-10.bg-gradient-to-br.from-primary\\/10.to-primary\\/5.rounded-lg	Primary color, inline SVG set:html

LLM Providers Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (LLM Providers)	Slate background
Section heading	h2 "Works with your favorite AI"	text-2xl md:text-3xl
Subtitle	p "Connect to any LLM provider or self-host your own"	text-slate-600
Provider row	.flex.flex-wrap.justify-center.gap-8.items-center.opacity-70	70% opacity
Claude icon	Emoji "robot" in .w-12.h-12.bg-white.rounded-xl.border	Label: "Claude"
ChatGPT icon	Emoji "speech balloon" in same container	Label: "ChatGPT"
Ollama icon	Emoji "llama" in same container	Label: "Ollama"
Any LLM icon	Emoji "lightning" in same container	Label: "Any LLM"

Related Features

Element	Selector	Notes
Section	section.py-12.bg-slate-50 (Related)	Runs visually continuous with LLM section
Section heading	h2 "Related Features"	text-xl
Browser MCP card	a[href="/features/browser-mcp"]	h3 "SideButton Browser MCP", hover:border-primary + shadow-md
AI Automation card	a[href="/features/ai-automation"]	h3 "AI Automation"
Integrations card	a[href="/integrations"]	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	.bg-slate-900.rounded-2xl	Dark background with primary+accent blur decorations
Section heading	h2 "Start chatting with any website"	text-white
Subtitle	p "Install the extension and open the chat panel..."	text-slate-300
Install Free Extension	a[href*="chromewebstore.google.com"]	bg-primary button
View Documentation	a[href*="docs.sidebutton.com"] (CTA secondary)	bg-white/10 button

Data Model

Static feature page — no editable entities. Content is rendered at build time from Astro components.

Field	Type	Description
capabilities	array[6]	Capability card data: icon key, title, description (example prompt in quotes)
howItWorks	array[4]	Step data: step number, title, description
privacyFeatures	array[4]	Privacy card data: inline SVG icon string, title, description
LLM providers	array[4]	Hardcoded in template: Claude, ChatGPT, Ollama, Any LLM (emoji icons)
Related features	array[3]	Browser MCP (/features/browser-mcp), AI Automation (/features/ai-automation), Integrations (/integrations)
SEO schemas	array[2]	HowTo (4 steps), BreadcrumbList (Home > Features > SideButton AI Assistant)
links import	object	links from ../../lib/theme provides chromeStore and docs URLs

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, no interactive elements
Cookie dialog	First visit	Cookie Notice dialog overlay with Accept/Reject buttons
SideButton FAB	Extension installed	Green "S" circle + "Click" button at bottom-right corner
Hero badge pulse	Continuous	Badge dot pulses via animate-pulse class
Capability hover	Hover on card	border-slate-100 -> border-slate-200 transition
Privacy card hover	Hover on card	border-slate-100 -> border-slate-200 transition
Related card hover	Hover on card	border-slate-200 -> border-primary + shadow-md, h3 text becomes primary color
Responsive mobile (<= 768px)	Small viewport	Grid columns collapse to 1, CTA buttons stack vertically (flex-col), How It Works becomes single column, connecting lines hidden
Responsive tablet (768-1024px)	Medium viewport	Capabilities and Privacy grids remain 2-column, How It Works may be 2-column
Responsive desktop (>= 1024px)	Large viewport	Full layout: How It Works 4-column with connecting gradient lines

Common Tasks

Verify Page Loads Correctly

1. Navigate to /features/chat
2. Verify hero heading "SideButton AI Assistant" is visible
3. Verify badge "Works on any website" appears with pulsing teal dot
4. Scroll through all 7 sections and verify none are missing
5. Verify no broken images or missing icons

Verify All Capability Cards Display

1. Scroll to "What can you do?" section
2. Count 6 capability cards in 2-column grid
3. Verify each card has: icon (colored div), title (bold), description (italic quote)
4. Verify card titles: Navigate anywhere, Read and summarize, Fill forms and click buttons, Extract data to clipboard, Create tickets and tasks, Draft emails and messages

Verify How It Works Steps

1. Scroll to "How it works" section
2. Verify 4 step cards with numbered circles (1-4)
3. On desktop (>= 768px), verify gradient connecting lines between steps 1-3
4. Verify step titles: Open the chat panel, Ask in plain English, AI reads the page, Watch it happen
5. Resize to mobile and verify connecting lines disappear

Verify Privacy Section Content

1. Scroll to "Privacy & Control" section
2. Verify 4 benefit cards in 2-column grid
3. Verify each card has SVG icon in gradient container + title + description
4. Verify card titles: Runs locally, You approve every action, Open source, Works with any LLM

Verify All Links Work

1. Check hero "Get Started Free" links to docs.sidebutton.com/installation
2. Check hero "Documentation" links to docs.sidebutton.com
3. Check Related Features links: /features/browser-mcp, /features/ai-automation, /integrations
4. Check CTA "Install Free Extension" links to Chrome Web Store
5. Check CTA "View Documentation" links to docs.sidebutton.com

Verify Responsive Layout

1. Set viewport to 375px width (mobile)
2. Verify hero CTA buttons stack vertically
3. Verify capability grid becomes single column
4. Verify How It Works cards become single column, no connecting lines
5. Set viewport to 768px (tablet) and verify 2-column grids
6. Set viewport to 1280px+ and verify full 4-column How It Works layout

Tips

• This page uses the shared FeatureHero component (not BrowserMcpHero) — simpler hero with radial gradient background and no animation
• The capabilities section reuses the CapabilityList component also used on browser-mcp and ai-automation pages
• Capability descriptions are wrapped in quotes to indicate they are example prompts users could type
• The How It Works connecting lines use absolute positioning with left-[60%] and w-[80%] — they only appear on md: breakpoint and above
• Privacy card icons are inline SVG strings passed via the privacyFeatures array and rendered with Fragment set:html
• LLM provider icons use emoji rather than SVG logos, displayed at 70% opacity
• The CTA section is customized with Chrome Web Store as the primary link (not docs install like other feature pages)
• Both bg-slate-50 sections (LLM Providers and Related Features) run visually continuous since they share the same background color

Gotchas

• No interactive elements: Unlike the browser-mcp page, this page has no JavaScript-driven interactivity (no tabs, no animations, no copy buttons) — it is purely static HTML/CSS
• Two bg-slate-50 sections adjacent: The LLM Providers and Related Features sections both use bg-slate-50 and appear as one continuous section visually — the boundary between them is only visible in the DOM
• Capability card descriptions include quotes: The descriptions are wrapped in literal quote characters ("Go to my LinkedIn inbox...") — these are part of the content, not HTML attributes
• FeatureHero CTA links come from theme.ts: The "Get Started Free" and "Documentation" button URLs are imported from links in ../../lib/theme — they resolve to docs.sidebutton.com/installation and docs.sidebutton.com respectively
• How It Works connecting lines are decorative only: The gradient lines between steps are absolute positioned divs — they don't affect layout and may misalign if step card heights vary significantly
• Privacy icons use set:html: The SVG icons in privacy cards are rendered via Astro's set:html directive, meaning they are raw HTML injection — they won't appear in snapshot accessibility trees as interactive elements