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

Sales Manager

Script Writer

Fullstack Engineer

CSS

JavaScript

Node.js

Computer Software

Like this project

Posted Feb 13, 2026

Developed a configurable conversation script runner for ScriptDeck.

Likes

Views

📋 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

Open http://localhost:5173.

Production Build

npm run build
npm run preview

⌨️ Keyboard Shortcuts

Key Action 1–8 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.