Knowledge Pack Files

SideButton Marketing Website Knowledge Pack Files

Browse the source files that power the SideButton Marketing Website MCP server knowledge pack.

Available free v1.0.3 Browser

$ sidebutton install sidebutton.com

Download ZIP

features-embed-buttons/_skill.md

16.6 KB

What This Is

Feature page for SideButton Embed Buttons — contextual one-click automation buttons that appear inline on websites. The extension detects page context, shows relevant workflow buttons, and executes on click. Uses the shared FeatureHero component with "Contextual Automation" badge (accent/orange color). Includes: 4-step "How Embed Buttons Work" section with numbered cards, interactive Gmail compose mockup with 3 embed buttons (Draft Reply, Summarize Thread, Extract Tasks), Supported Platforms section with dynamically-generated platform cards from getEmbedSupportedPlatforms() plus a static "Any Website" card with dashed border, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas for SEO.

URL Patterns

Pattern	Description
`/features/embed-buttons`	Embed buttons feature page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Contextual Automation" (orange/accent)    |
|   H1: "Embed SideButton Buttons"                   |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. HOW IT WORKS — bg-slate-50]                      |
|   "How Embed Buttons Work" heading                  |
|   4-column grid (md:grid-cols-2 lg:grid-cols-4)    |
|   Each: numbered circle (bg-primary) + title + desc |
|   1. Extension Detects Context                      |
|   2. Relevant Buttons Appear                        |
|   3. One Click Triggers Workflow                    |
|   4. AI-Powered Results                             |
|                                                     |
| [3. INTERACTIVE DEMO — "See It In Action"]          |
|   Gmail compose browser mockup in bg-slate-100:     |
|     Browser bar: dots + "mail.google.com/compose"   |
|     To: [email protected]                            |
|     Subject: Re: Project Update                     |
|     Compose textarea (placeholder)                   |
|     SideButton embed buttons bar:                   |
|       "SideButton:" label + 3 buttons:              |
|       Draft Reply (primary/green) |                 |
|       Summarize Thread (slate) |                    |
|       Extract Tasks (slate)                         |
|     Send (blue) + Discard buttons                   |
|   Caption: "Embed buttons appear automatically..."  |
|                                                     |
| [4. SUPPORTED PLATFORMS — bg-slate-50]               |
|   "Supported Platforms" heading                     |
|   grid-cols-2 md:grid-cols-4 of platform cards      |
|   Dynamic cards from getEmbedSupportedPlatforms()   |
|   Each: colored icon container + name + count       |
|   + "Any Website" static card (dashed border, +icon)|
|                                                     |
| [5. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   Chat | Workflow Engine | Integrations              |
|                                                     |
| [6. CTA — FeatureCTA component, bg-slate-900]       |
|   "Get Embed SideButton Buttons"                    |
|   "Get Started Free" + "Browse Integrations"        |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	`section.relative.overflow-hidden` (first)	Shared FeatureHero
Badge	`.inline-flex.rounded-full` with "Contextual Automation"	Orange: bg-accent/10 text-accent border-accent/20
Badge dot	`span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse`	Pulsing orange dot
Hero heading	`h1` "Embed SideButton Buttons"	text-4xl md:text-5xl lg:text-6xl
Hero subtitle	`p` "One-click automation buttons that appear in context..."	text-lg md:text-xl
Get Started Free	`a[href*="docs.sidebutton.com/installation"]`	bg-primary button
Documentation	`a[href*="docs.sidebutton.com"]` (outline)	bg-white border button

How It Works Section

Element	Selector	Notes
Section	`section.py-16.bg-slate-50` (first)	Slate background
Section heading	`h2` "How Embed Buttons Work"	text-2xl md:text-3xl
Subtitle	`p` "Contextual automation that appears when you need it"	text-slate-600
Step grid	`.grid.md\\:grid-cols-2.lg\\:grid-cols-4.gap-6`	Responsive: 1/2/4 columns
Step card	`.bg-white.rounded-xl.border.border-slate-200.p-6.relative`	White card with border
Step number	`.w-10.h-10.bg-primary.text-white.rounded-full`	Primary color circle, bold number
Step 1: Detect	`h3` "Extension Detects Context"	"SideButton recognizes which page you're on and what you're doing..."
Step 2: Appear	`h3` "Relevant Buttons Appear"	"Contextual automation buttons show up in the UI..."
Step 3: Trigger	`h3` "One Click Triggers Workflow"	"Click a button to run the workflow..."
Step 4: Results	`h3` "AI-Powered Results"	"Workflows can use AI to generate content..."

Interactive Demo Section (Gmail Mockup)

Element	Selector	Notes
Section	`section.py-16` (Demo)	White background
Section heading	`h2` "See It In Action"	text-2xl md:text-3xl
Subtitle	`p` "Example: Gmail compose with SideButton embed buttons"	text-slate-600
Mockup container	`.bg-slate-100.rounded-2xl.p-4.md\\:p-8`	Outer gray frame
Browser window	`.bg-white.rounded-xl.shadow-lg.overflow-hidden.border.border-slate-200`	Inner white card
Browser bar	`.bg-slate-50.border-b.border-slate-200.px-4.py-3`	Contains dots + URL
Traffic lights	3x `.w-3.h-3.rounded-full` (bg-red-400, bg-yellow-400, bg-green-400)	Browser window dots
URL bar	`.bg-slate-100.rounded-md.px-3.py-1\\.5.text-xs.font-mono`	Shows "mail.google.com/compose"
To field	Static div	"[email protected]" in bg-slate-50
Subject field	Static div	"Re: Project Update" in bg-slate-50
Compose area	`.border.border-slate-200.rounded-lg`	Contains textarea + embed buttons bar
Placeholder text	`.p-4.min-h-\\[120px\\].text-sm.text-slate-400`	"Write your message..."
Embed buttons bar	`.border-t.border-slate-200.px-4.py-3.bg-slate-50`	Contains label + 3 buttons
SideButton label	`span.text-xs.text-slate-400`	"SideButton:" prefix
Draft Reply button	`button` "Draft Reply"	bg-primary text-white rounded-full, primary embed button
Summarize Thread button	`button` "Summarize Thread"	bg-slate-200 text-slate-700 rounded-full
Extract Tasks button	`button` "Extract Tasks"	bg-slate-200 text-slate-700 rounded-full
Send button	`button` "Send"	bg-blue-600 text-white, Gmail-styled
Discard button	`button` "Discard"	text-slate-600, plain button
Caption	`.mt-6.flex.items-center.justify-center.gap-2.text-sm.text-slate-500`	Arrow icon + "Embed buttons appear automatically in context"

Supported Platforms Section

Element	Selector	Notes
Section	`section.py-16.bg-slate-50` (Platforms)	Slate background
Section heading	`h2` "Supported Platforms"	text-2xl md:text-3xl
Subtitle	`p` "Embed buttons work on these platforms and any custom website"	text-slate-600
Platform grid	`.grid.grid-cols-2.md\\:grid-cols-4.gap-4`	2-column mobile, 4-column desktop
Platform card (dynamic)	`a[href^="/integrations/"]`	White card, icon container + name + "{count} workflows"
Platform icon container	`.w-12.h-12.rounded-xl` with `background-color: ${platform.color}20`	20% opacity tinted background
Platform logo	`img.w-6.h-6.object-contain`	From platform.logoUrl
Platform logo fallback	`.w-6.h-6.rounded` with bg-color + white text	First letter initial
Platform name	`h3.font-semibold.text-slate-900.text-sm`	group-hover:text-primary
Platform count	`p.text-xs.text-slate-500`	"{count} workflows" — dynamic from getWorkflowsByPlatform
Any Website card	`.bg-white.rounded-xl.border.border-slate-200.border-dashed`	Static card, dashed border, no link
Any Website icon	`.w-12.h-12.bg-primary\\/10` with plus SVG icon	Primary color plus sign
Any Website heading	`h3` "Any Website"	font-semibold text-sm
Any Website subtitle	`p` "Custom integrations"	text-xs text-slate-500

Related Features

Element	Selector	Notes
Section	`section.py-12.bg-slate-50`	Continuous slate background
Section heading	`h2` "Related Features"	text-xl
Chat card	`a[href="/features/chat"]`	h3 "SideButton AI Assistant", hover:border-primary
Workflows card	`a[href="/features/workflow-engine"]`	h3 "SideButton Workflows"
Integrations card	`a[href="/integrations"]`	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	`.bg-slate-900.rounded-2xl`	Dark background
Section heading	`h2` "Get Embed SideButton Buttons"	text-white
Subtitle	`p` "Install SideButton and get one-click automation buttons..."	text-slate-300
Get Started Free	`a[href*="docs.sidebutton.com/installation"]`	bg-primary button
Browse Integrations	`a[href="/integrations"]`	bg-white/10 button

Data Model

Static feature page with dynamic platform data from marketplace module. Content rendered at build time.

Field	Type	Description
howItWorks	array[4]	Step data: step number (string), title, description
embedPlatforms	array[N]	Dynamic: from `getEmbedSupportedPlatforms()` — platforms with embed button support, featured first
workflowCounts	computed	Per-platform: `getWorkflowsByPlatform(platform.id).length` computed at build time
Gmail mockup data	hardcoded HTML	To: [email protected], Subject: Re: Project Update, 3 embed buttons
Embed button types	array[3]	Draft Reply (primary), Summarize Thread (slate), Extract Tasks (slate)
Related features	array[3]	Chat (/features/chat), Workflow Engine (/features/workflow-engine), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > Embed SideButton Buttons), HowTo (3 steps)

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, mockup buttons styled but non-functional
Cookie dialog	First visit	Cookie Notice dialog overlay
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right
Hero badge pulse	Continuous	Orange dot pulses via animate-pulse
Draft Reply hover	Hover on mockup button	bg-primary -> bg-primary-hover transition
Summarize/Extract hover	Hover on mockup buttons	bg-slate-200 -> bg-slate-300 transition
Send hover	Hover on Send button	bg-blue-600 -> bg-blue-700 transition
Discard hover	Hover on Discard button	adds bg-slate-100
Platform card hover	Hover on platform link	border -> border-primary + shadow-md, name text -> primary
Related card hover	Hover on card	border-primary + shadow-md, h3 text primary
Responsive mobile (<= 768px)	Small viewport	How It Works single column, platform grid 2-column, mockup padding reduced (p-4), CTA buttons stack
Responsive tablet (768-1024px)	Medium viewport	How It Works 2-column, platform grid 4-column
Responsive desktop (>= 1024px)	Large viewport	How It Works 4-column, full layout
Any Website card	Always static	Dashed border, no hover link effect, no href

Common Tasks

Verify Page Loads Correctly

Navigate to /features/embed-buttons
Verify hero heading "Embed SideButton Buttons" is visible
Verify "Contextual Automation" badge with pulsing orange dot
Scroll through all 6 sections and verify none are missing
Verify Gmail mockup renders with all 3 embed buttons

Verify How It Works Steps

Scroll to "How Embed Buttons Work" section
Verify 4 step cards with numbered circles (1-4, primary green background)
Verify step titles: Extension Detects Context, Relevant Buttons Appear, One Click Triggers Workflow, AI-Powered Results
Each card should have description text below the title
On mobile, verify cards stack to single column

Verify Gmail Mockup

Scroll to "See It In Action" section
Verify browser mockup frame with traffic light dots (red, yellow, green)
Verify URL bar shows "mail.google.com/compose"
Verify email fields: To "[email protected]", Subject "Re: Project Update"
Verify compose area with placeholder "Write your message..."
Verify "SideButton:" label and 3 embed buttons: Draft Reply (green), Summarize Thread (gray), Extract Tasks (gray)
Verify Send (blue) and Discard buttons below compose area
Verify caption text "Embed buttons appear automatically in context" with arrow icon

Verify Supported Platforms

Scroll to "Supported Platforms" section
Count platform cards (dynamic, depends on marketplace data)
Verify each card has: colored icon container, platform name, workflow count
Verify "Any Website" card is present with dashed border and plus icon
Click a platform card and verify navigation to /integrations/{slug}
Verify "Any Website" card is NOT clickable (no link)

Verify All Links Work

Check hero "Get Started Free" -> docs.sidebutton.com/installation
Check hero "Documentation" -> docs.sidebutton.com
Check platform cards -> /integrations/{slug} for each
Check Related Features: /features/chat, /features/workflow-engine, /integrations
Check CTA "Get Started Free" -> docs install
Check CTA "Browse Integrations" -> /integrations

Verify Responsive Layout

Set viewport to 375px (mobile)
Verify How It Works grid becomes single column
Verify platform grid becomes 2-column
Verify mockup has reduced padding (p-4 instead of p-8)
Set viewport to 768px and verify How It Works 2-column, platforms 4-column
Set viewport to 1280px+ and verify How It Works 4-column layout

Tips

This page uses the "accent" badge color (orange) — the only feature page to do so; chat and workflow-engine use "primary" (teal), ai-automation uses "success" (green)
The Gmail mockup is purely HTML/CSS with no JavaScript — the buttons have hover effects but do not trigger any actions
Draft Reply button is styled distinctly (bg-primary text-white) compared to Summarize Thread and Extract Tasks (bg-slate-200 text-slate-700) to indicate the primary action
The "Any Website" card uses border-dashed to visually distinguish it from the linked platform cards
Platform cards use getEmbedSupportedPlatforms() (not getPlatforms()) — this filters to platforms with embed button support and sorts featured platforms first
Workflow counts per platform are computed at build time via getWorkflowsByPlatform(platform.id).length
The mockup URL bar uses font-mono for the "mail.google.com/compose" text to match browser chrome appearance
Multiple consecutive bg-slate-50 sections (Platforms, Related Features) create a continuous gray area

Gotchas

No client-side JavaScript: This page has no <script> tags — the mockup buttons are static HTML with CSS hover effects only, not interactive demos
Mockup buttons are real HTML buttons: The Draft Reply, Summarize Thread, Extract Tasks, Send, and Discard are all <button> elements — automation tools will detect them as interactive, but clicking them does nothing
Platform cards are dynamic at build time: The number and order of platform cards depends on getEmbedSupportedPlatforms() at build — the actual platforms shown may differ from what is documented here
"Any Website" card has no link: Unlike the platform cards which are <a> tags, the "Any Website" card is a <div> — clicking it navigates nowhere
Platform icon container opacity trick: The icon background uses ${platform.color}20 (hex + 20% alpha suffix) which may render differently across browsers that don't support 8-digit hex colors
How It Works grid uses 3 breakpoints: grid-cols-1 (default) / md:grid-cols-2 / lg:grid-cols-4 — the intermediate 2-column state at 768-1024px means steps 1-2 appear as a row and 3-4 as a row