ScriptDeck Conversation Script Runner Development by Hatim El HassakScriptDeck Conversation Script Runner Development by Hatim El Hassak

ScriptDeck Conversation Script Runner Development

Hatim El Hassak

Hatim El Hassak

📋 ScriptDeck

Configurable step-by-step conversation script runner with response cards
A fast, keyboard-driven terminal for managing call scripts, rebuttals, session analytics, and checklists — all in the browser, all offline.

✨ Features

📝 Script Steps

8-step conversation flow — walk through scripted steps sequentially
Rich-text editing — bold, italic, highlights, blockquotes
Step tracking — time spent on each step logged automatically
Arrow keys / number keys to navigate steps

🛡️ Response Cards

Categorized rebuttals — Trust, Objection, Value, Pricing, Competitor
Expand/collapse — click to reveal full response text
Quick copy — one-click copy response to clipboard
Search & filter — find the right response instantly
Editable — add, edit, and delete cards in edit mode

📊 Session Analytics

Call duration, steps reached, checklist completion
Per-step time tracking with visual bar chart
Session history log — saved across sessions

⏱️ Call Timer

Auto-starts on first interaction
Tracks total call time and time per step
Reset button saves session to history

✅ Call Checklist

Pre-configured checklist items (fully customizable)
Check off items as you progress through the call

🎨 Design

Clean blue theme (light) / deep navy (dark)
Glassmorphism modals with backdrop blur
Keyboard-first — arrow keys to navigate, E to edit

🚀 Quick Start

git clone https://github.com/hatimhtm/ScriptDeck.git
cd ScriptDeck
npm install
npm run dev

Production Build

npm run build
npm run preview

⌨️ Keyboard Shortcuts

Key Action 18 Jump to script step Next step Previous step E Toggle edit mode ⌘Z / Ctrl+Z Undo ⌘⇧Z / Ctrl+Shift+Z Redo ⌘S / Ctrl+S Export script Esc Close modals

📁 Project Structure

ScriptDeck/
├── index.html # App entry point
├── package.json # Dependencies & scripts
├── vite.config.js # Build config
└── src/
├── main.js # App controller
├── state.js # State manager (localStorage, undo/redo, sessions)
├── data.js # Demo script & rebuttals
└── styles/
├── variables.css # Design tokens & themes
├── layout.css # Grid layout & modals
├── toolbar.css # Toolbar, step nav, timer
├── script.css # Script card panels
├── rebuttals.css # Rebuttal cards, analytics, history
└── sidebar.css # Checklist

🔧 Customization

Loading Your Own Script

Click Edit Script to enter edit mode
Modify step content, add/remove rebuttals
Click Export to save as JSON
Share with your team — they Import the JSON to load it

Custom Categories

Edit src/data.js to add new rebuttal categories and adjust the color palette in variables.css.

📄 License

MIT — free for personal and commercial use.
Built for anyone who works with scripts — sales, support, onboarding, or training.
Like this project

Posted Feb 13, 2026

Developed a configurable conversation script runner for ScriptDeck.