🎬 Copilot Demo Script Builder¶
Built: 2026-04-18
URL: aguidetocloud.com/demo-scripts/
Status: ✅ Live (v3)
Pattern: Data-driven Hugo + client-side JS (100% offline, zero API calls)
Accent:#F97316(Vivid Orange, hue 25°)
CSS Namespace:.demoscr-*
Body Class:page-demo-scripts
What It Does¶
The tool Copilot Solution Engineers wish they had. Pick a demo scenario → configure audience, duration, apps, and risk tolerance → get a complete, ready-to-deliver demo script with:
- Step-by-step flow — numbered steps with what to click, what to type, and what Copilot should show
- Audience-specific talking points — Technical / Business / Executive variants for every step
- Copilot prompts — tested prompts you can copy and paste directly into M365 apps
- Fallback plans — "What if it doesn't work?" expandable section per step
- Wow moments ⭐ — highlighted steps that make the audience go "oh!"
- Timing cues — pacing markers throughout the script
- Before/After visualiser — time comparison (e.g. "2 hours → 15 minutes, 87% saving")
- Q&A Prep — predicted audience questions with suggested answers per scenario category
Architecture¶
content/demo-scripts/_index.md ← Hugo content (SEO front matter + 8 FAQs)
layouts/demo-scripts/list.html ← 4-tab layout + wizard modal + practice overlay (~280 lines)
static/css/demo-scripts.css ← Vivid Orange #F97316 accent (~1800 lines)
static/js/demo-scripts.js ← Script assembly engine + all V2/V3 features (~1050 lines)
data/demo_scripts/scenarios.toml ← 15 scenarios + 11 apps + Q&A prep by category
data/demo_scripts/steps.toml ← ~80 demo steps across all scenarios
data/demo_scripts/prompts.toml ← 35 curated demo prompts with reliability ratings
data/demo_scripts/tips.toml ← 5 rules, 6 failure tips, checklists, 10 traps, 7 seeder steps
Integration Points¶
| File | Change |
|---|---|
layouts/_default/baseof.html |
page-demo-scripts body class |
data/toolkit_nav.toml |
Tool entry (copilot category, #F97316) |
data/tool_colours.toml |
Vivid Orange hue 25° |
data/tool_counters.toml |
Counter: "demo scripts generated" |
layouts/free-tools/list.html |
Card in Copilot & AI Planning section |
scripts/og-generator/taglines.toml |
OG tagline |
scripts/capture-tool-previews.py |
Preview screenshot entry |
hugo.toml |
Bumped cache_version |
The 4 Tabs¶
Tab 1: 🎯 Script Builder (Default)¶
User Journey:
- Pick scenario — 15 scenario cards across 11 categories (Sales, HR, IT, Finance, Marketing, Executive, Legal, Operations, Service, Education, Custom)
- Category filter — pill buttons filter scenario cards by industry
- Configure — Audience (Technical/Business/Executive), Duration (5/15/30 min), Wow Factor (Safe/Moderate/Bold), Focus Apps (11 M365 apps)
- Get script — Instant assembly with intro, numbered steps, prompts, expected responses, talking points, fallbacks, timing cues, closing
- Before/After — Time comparison visualiser below the script
- Q&A Prep — Predicted audience questions with suggested answers
Script Assembly Logic:
Steps filtered by: scenario ID → min_duration ≤ selected duration
→ risk ∈ allowed risk levels
→ app ∈ selected apps
→ sorted by order field
15 Scenarios:
| Category | Scenarios |
|---|---|
| Sales | Pipeline Review, Customer Proposal |
| HR | Policy Q&A, New Hire Onboarding |
| IT | Incident Response, KB Article Creation |
| Finance | Budget Analysis, Quarterly Review Prep |
| Marketing | Campaign Brief |
| Executive | Email Triage, Meeting Summary & Actions |
| Legal | Contract Review |
| Operations | Supply Chain Update |
| Service | Customer Service (Ticket Resolution) |
| Education | Lesson Planning |
Tab 2: 💬 Prompt Library¶
35 curated demo prompts across 7 M365 apps:
- Copilot Chat (6) — meeting prep, weekly summary, find documents, action items, competitor intel, project status
- Teams (5) — meeting summary, decisions, catch up, topic breakdown, sentiment
- Outlook (5) — thread summary, draft reply, email triage, coaching, schedule
- Word (5) — draft proposal, summarise, rewrite, FAQ, cross-file reference
- Excel (5) — analyse data, formula, chart, pivot table, sort/filter
- PowerPoint (5) — from prompt, from document, organise, speaker notes, summarise
- Loop (2) — brainstorm, action tracker
Each prompt shows: app badge, reliability rating (✅ Reliable / ⚡ Impressive), expected response, talking point, one-click copy.
Tab 3: 📚 Demo Tips¶
- 5 Rules of a Great Copilot Demo — Show Don't Tell, Start with Problem, Realistic Data, Narrate Value, End with Scale Question
- When Copilot Fails Live — 6 recovery strategies
- Know Your Audience — 3 audience cards with 7 tips each
- Tenant Preparation Checklist — 10 items with priority badges (critical/high/medium/low)
- Hardware & Network Checklist — 8 items
- Common Demo Traps — 10 trap+fix cards
- Demo Tenant Data Seeder — 7-step guide to populate a demo tenant with realistic data
Tab 4: ❓ FAQ¶
8 questions rendered as <details open> with JSON-LD FAQPage schema for SEO.
V2 Features¶
| Feature | Implementation |
|---|---|
| Category filter | Pill buttons above scenario grid, JS filters cards by data-category |
| Business value tagline | Tagline span in each card, shown on hover/active via CSS |
| Custom scenario | Text input → JS keyword search across all steps → click to load matching scenario |
| Practice mode | Fullscreen overlay with sticky header, timer, Prev/Next/Exit buttons, keyboard nav (←→Esc) |
| Shareable URL | #s=scenario&a=audience&d=duration&r=risk hash, read on load, update on change |
| Global search | Search bar → searches scenarios, prompts, FAQ → click result navigates to correct tab |
| Export Markdown | Generates .md file download with full script structure |
| Share link | Copies current URL with config hash to clipboard |
| Enhanced print | Light-mode @media print, script-only (hides UI), page-break-inside: avoid |
V3 Features¶
| Feature | Implementation |
|---|---|
| 4 new scenarios | Legal (Contract Review), Operations (Supply Chain), Service (Ticket Resolution), Education (Lesson Planning) |
| Before/After Visualiser | timingMap object with 15 scenario timings → rendered as side-by-side boxes with savings badge |
| Q&A Prep | qa_prep TOML array by category → matched to current scenario → rendered as expandable <details> |
| Scenario Wizard | 3-step modal (Industry → Pain Point → Duration) → maps to best scenario via painToScenarioMap + categoryFallback |
| Practice Scorecard | Tracks step ratings + times → summary after all steps completed |
| Recording Mode | Top bar overlay with REC dot, timer, step progress, Next/Stop buttons |
| Data Seeder Guide | 7-step guide in Tips tab from tips.toml seeder_steps |
Data Model¶
scenarios.toml¶
[[scenarios]]
id = "sales-pipeline" # Unique ID, used in steps.toml
name = "Sales Pipeline Review" # Display name
icon = "📊" # Card emoji
category = "Sales" # Category filter
tagline = "Prepare for a pipeline review..." # Shown on hover
apps = ["copilot-chat", "excel", "teams", "outlook", "powerpoint"]
business_value = "Turn 2 hours of meeting prep into 15 minutes..."
time_without = "2 hours" # V3: Before/After
time_with = "15 minutes" # V3: Before/After
default = true # Only one scenario has this
[[qa_prep]]
category = "Sales"
icon = "📊"
questions = [
{ q = "How does Copilot handle confidential data?", a = "..." },
]
steps.toml¶
[[steps]]
scenario = "sales-pipeline" # Links to scenario ID
order = 1 # Sort order within scenario
app = "copilot-chat" # M365 app ID
title = "Get Customer Context" # Step heading
action = "Open Copilot Chat" # What to click/do
prompt = "Summarise my recent..." # What to type
expected = "Copilot shows..." # What should appear
talk_technical = "..." # Talking point for tech audience
talk_business = "..." # Talking point for biz audience
talk_executive = "..." # Talking point for exec audience
fallback = "If it doesn't..." # Recovery plan
wow = true # ⭐ Wow moment badge
risk = "low" # low/medium/high
min_duration = 5 # 5=all durations, 15=15+30, 30=30 only
prompts.toml¶
[[prompts]]
id = "chat-meeting-prep" # Unique ID
app = "copilot-chat" # M365 app
category = "Meetings" # Grouping
prompt = "Help me prepare..." # The actual prompt
expected = "Copilot shows..." # Expected output
talk = "This is meeting prep..." # Talking point
reliability = "high" # high/medium
tips.toml¶
Contains: [[rules]], [[failure_tips]], [audience_tips.technical/business/executive], [[tenant_checklist]], [[hardware_checklist]], [[traps]], [[seeder_steps]]
QA Test Results¶
V3 Final (2026-04-18)¶
| Metric | Result |
|---|---|
| Pass rate | 95% (20/21 tests) |
| Scenarios | 15 render with steps ✅ |
| Wizard | 3-step flow → apply ✅ |
| Before/After | Renders for all scenarios ✅ |
| Q&A Prep | Category-matched questions ✅ |
| Practice mode | Open, navigate, scorecard, exit ✅ |
| Recording mode | Timer, nav, stop ✅ |
| Category filter | 11 pills, filtering works ✅ |
| Search | Cross-tab results ✅ |
| URL hash | Generates + restores ✅ |
| Light mode, script-only ✅ | |
| Hugo build | 1773 pages, 0 errors ✅ |
| JS syntax | 50KB, 0 errors ✅ |
Content Principles¶
- ✅ All original content — no copied Microsoft-internal demo scripts
- ✅ Uses Contoso and Northwind (Microsoft's standard fictional companies)
- ✅ All prompts designed around GA features
- ✅ Preview features flagged with ⚠️ warning
- ✅ 100% client-side, no data sent anywhere
- ✅ Dark glassmorphism matching site design