Real-Time Voiceflow SDK Event Stream
Client Webchat SDK Invocation
// 1. Open widget
window.voiceflow.chat.open();
// 2. Close widget
window.voiceflow.chat.close();
// 3. Show or Hide
window.voiceflow.chat.show();
window.voiceflow.chat.hide();
// 4. Trigger specific intent
window.voiceflow.chat.interact({
action: {
type: 'intent',
payload: {
query: 'I want to explore your services',
intent: { name: 'Service_Inquiry' }
}
}
});
Headless Runtime REST API (Dialog API)
curl -X POST https://general-runtime.voiceflow.com/state/user/USER_12345/interact \
-H "Authorization: VF.DM.YOUR_API_KEY" \
-H "Content-Type: application/json" \
-H "versionID: production" \
-d '{
"action": {
"type": "intent",
"payload": {
"query": "I want to explore your services",
"intent": { "name": "Service_Inquiry" }
}
}
}'
Bolt.new Master Prompts for Voiceflow Chat Controller
Tier 1: Core Single-Shot Controller Prompt
Build a modern dark-mode web application in Bolt.new that provides an external button-driven control panel for a Voiceflow chat assistant.
Layout & Appearance:
- Background #0b101b with subtle ambient glow.
- Centered glassmorphic card 'Chat Controller' with subtitle 'Manage your Voiceflow assistant'.
- Rounded mint/teal speech bubble icon at top.
- 2x2 Action Button Grid:
* Open: expands chat widget (window.voiceflow.chat.open())
* Close: closes chat widget (window.voiceflow.chat.close()), highlighted with rose-crimson gradient when active
* Show: restores launcher & widget visibility (window.voiceflow.chat.show())
* Hide: hides launcher & widget completely (window.voiceflow.chat.hide())
- Full width amber-to-rose gradient button:
* '⚡ Trigger Intent': dispatches structured action via window.voiceflow.chat.interact({ action: { type: 'intent', payload: { query: '...' } } })
- Real-time status indicators below buttons:
* Chat: Active (teal) / Closed (muted)
* Launcher: Visible (cyan) / Hidden (muted)
- Footer text: 'Powered by Voiceflow'.
Include a built-in faithful simulation of the Voiceflow webchat widget on the right (magenta header, assistant avatar, welcome message, 'Chat has ended' divider, 'Start new chat' button, and floating launcher circle) that reacts synchronously to all button actions offline without external API keys.
Tier 2: Real-time Telemetry & Dynamic Intents
Add an interactive Telemetry and API Inspector drawer to the Chat Controller:
1. Log every button dispatch with millisecond timestamps, exact JavaScript method called, and payload details.
2. Provide a dropdown selector to choose between different intents (Service Inquiry, Get Quote, Support, Schedule Demo).
3. Display equivalent headless cURL and fetch requests for the Voiceflow General Runtime Dialog API (POST /state/user/{userID}/interact).