From 3afae6cf099555734a96f681e98999719626b61e Mon Sep 17 00:00:00 2001
From: Sabiha Khan <87858386+chewwbaka@users.noreply.github.com>
Date: Wed, 31 Dec 2025 13:28:14 +0530
Subject: [PATCH] docs: add page for Workflow editing basics (#93)

---
 docs/custom.css                         | 59 ++++++++++++++++++++++
 docs/docs.json                          |  5 ++
 docs/voice-agent/editing-a-workflow.mdx | 67 +++++++++++++++++++++++++
 3 files changed, 131 insertions(+)
 create mode 100644 docs/custom.css
 create mode 100644 docs/voice-agent/editing-a-workflow.mdx

diff --git a/docs/custom.css b/docs/custom.css
new file mode 100644
index 0000000..5dafe85
--- /dev/null
+++ b/docs/custom.css
@@ -0,0 +1,59 @@
+/* Custom search bar styling - Highlighted border with better text visibility */
+
+[data-search-button],
+.search-button,
+[aria-label*="search"],
+[placeholder*="Search"],
+button[data-testid*="search"],
+.mintlify-search,
+.DocSearch-Button {
+  background: rgba(22, 163, 74, 0.05) !important;
+  border: 3px solid #16A34A !important;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2), 0 4px 12px rgba(22, 163, 74, 0.15) !important;
+  border-radius: 10px !important;
+  transition: all 0.3s ease !important;
+  min-width: 280px !important;
+  padding: 12px 16px !important;
+}
+
+[data-search-button]:hover,
+.search-button:hover,
+[aria-label*="search"]:hover,
+[placeholder*="Search"]:hover,
+button[data-testid*="search"]:hover,
+.mintlify-search:hover,
+.DocSearch-Button:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4) !important;
+}
+
+/* Search text and icon styling - Better visibility */
+[data-search-button] *,
+.search-button *,
+[aria-label*="search"] *,
+[placeholder*="Search"] *,
+button[data-testid*="search"] *,
+.mintlify-search *,
+.DocSearch-Button * {
+  color: #16A34A !important;
+  font-weight: 500 !important;
+}
+
+/* Pulse animation */
+@keyframes search-pulse {
+  0% { box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3); }
+  50% { box-shadow: 0 4px 12px rgba(22, 163, 74, 0.6); }
+  100% { box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3); }
+}
+
+/* Apply animation to all search elements */
+[data-search-button],
+.search-button,
+[aria-label*="search"],
+[placeholder*="Search"],
+button[data-testid*="search"],
+.mintlify-search,
+.DocSearch-Button {
+  animation: search-pulse 2s ease-in-out infinite !important;
+}
+
diff --git a/docs/docs.json b/docs/docs.json
index bfaf61b..9f2d91f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -40,6 +40,7 @@
             "group": "Voice Agent Builder",
             "pages": [
               "voice-agent/introduction",
+              "voice-agent/editing-a-workflow",
               "voice-agent/template-variables",
               {
                 "group": "Nodes",
@@ -110,6 +111,10 @@
       "href": "https://app.dograh.com"
     }
   },
+  "search": {
+    "prompt": "Search for Webhook, Deployment, etc..."
+  },
+  "customCSS": "/custom.css",
   "contextual": {
     "options": [
      "copy",
diff --git a/docs/voice-agent/editing-a-workflow.mdx b/docs/voice-agent/editing-a-workflow.mdx
new file mode 100644
index 0000000..9cae6e1
--- /dev/null
+++ b/docs/voice-agent/editing-a-workflow.mdx
@@ -0,0 +1,67 @@
+---
+title: "Editing a Workflow"
+description: "Learn the fundamentals of building workflows with nodes, pathways, and conversation flow in the voice agent builder."
+---
+
+## Overview
+
+A workflow is a graph of connected nodes representing conversation stages, with pathways defining agent movement between stages.
+
+<iframe 
+  width="560" 
+  height="315" 
+  src="https://www.youtube.com/embed/Sfx_wRg9CSY?si=34-eN1sQEQ_BFROn" 
+  title="YouTube video player" 
+  frameborder="0" 
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+  referrerpolicy="strict-origin-when-cross-origin" 
+  allowfullscreen>
+</iframe>
+
+## Global Node
+
+Contains instructions applicable across the entire call:
+- Company context
+- Overall agent goal
+- Tone and personality
+- Common objection handling
+
+## Node-Level Toggles
+
+### Add Global Prompt
+- Recommended to inject Global Node instructions into most nodes
+
+### Allow Interruption
+- **Default "On"**: Bot stops and responds to user interruption
+- **"Off"**: Bot continues speaking, ignoring user input
+
+### Detect Voicemail
+- Available only in Start Node
+- Automatically disconnects if voicemail detected
+
+## Variable Extraction
+
+Supported in Agent and End Call Nodes:
+- Extract structured variables
+- Define name, type, and description
+- Examples: customer name, budget, interest
+
+## Webhook Node
+
+- Executed at call end
+- Sends payload to specific endpoint
+- Use for:
+  - Storing call data
+  - Triggering automation
+  - Syncing with CRMs
+
+## Editing Workflows
+
+- Selectively delete nodes/pathways
+- Completely reset workflow
+
+## Pathways and Tool Calls
+
+- Define agent node movement
+- Use tool calls to transition between nodes
+- **"tool"** is a reserved keyword for function calls and actions
\ No newline at end of file