Tutorial: Customer Escalation with Call Stages
Learn how to implement customer service escalation in Ultravox using call stages to handle customer complaints by transferring them to a manager.
Learn how to implement customer service escalation in Ultravox using call stages to handle customer complaints by transferring them to a manager.
What you’ll learn:
- How to implement an escalation tool
- How to use call stages to switch conversation context
- How to handle manager takeover with a new system prompt
- Testing escalation scenarios
Time to complete: 25 minutes
Prerequisites
Before starting this tutorial, make sure you have:
- Basic knowledge of TypeScript and React
- The starter code from our tutorial repository
- Node.js 16+ installed on your machine
- ngrok installed on your machine
Understanding Call Stages
Call stages in Ultravox enable dynamic changes to an ongoing conversation by:
- Switching system prompts mid-conversation
- Changing voice personalities
- Maintaining conversation context
- Handling role transitions seamlessly
In this tutorial, we’ll use call stages to transfer angry customers to a manager who can better handle their complaints.
Project Overview: Dr. Donut Manager Escalation
We’ll build an escalation system for our Dr. Donut drive-thru that allows the AI agent to transfer difficult situations to a manager. The system will:
- Recognize when a customer needs manager assistance
- Collect complaint details
- Switch to a manager persona with authority to resolve issues
Implementation Steps
Set Up ngrok
Enable external access to our escalation endpoint
Define the Tool
Create a schema for escalation requests
Create Manager Handler
Build the API route for manager takeover
Update System Prompt
Add escalation rules to the base prompt
Test the System
Verify escalation flows
If at any point you get lost, you can refer to the /final
folder in the repo to get final versions of the various files you will create or edit.
During testing, watch your terminal for ngrok request logs to verify the escalation endpoint is being called correctly.
Step 1: Set Up ngrok
First, we need to make our escalation endpoint accessible to Ultravox.
- Start your development server:
- In a new terminal, start ngrok:
-
Copy the HTTPS URL from ngrok (it will look like
https://1234-56-78-910-11.ngrok-free.app
) -
Update
toolsBaseUrl
indemo-config.ts
:
Step 2: Define the Escalation Tool
We’ll define an escalateToManager
tool that the AI agent will use to transfer difficult customers.
Update the selectedTools
array in demo-config.ts
and add to our call definition:
Step 3: Create Manager Handler
Create a new file at app/api/managerEscalation/route.ts
to handle the escalation:
Step 4: Update System Prompt
Add escalation rules to your base system prompt in demo-config.ts
:
Testing Your Implementation
Here are three scenarios to test the escalation system:
Scenario 1: Food Quality Issue
Scenario 2: Out of Stock Frustration
Scenario 3: Product and Refund
For each scenario, verify:
- The agent offers manager assistance
- The escalation tool is called with appropriate details
- The manager persona takes over with the new voice
- The manager follows the resolution guidelines
Common Issues
-
ngrok URL Not Working
- Make sure ngrok is running
- Check the URL is correctly copied to
demo-config.ts
- Verify no trailing slash in the URL
-
Escalation Not Triggering
- Check the system prompt includes escalation guidelines
- Verify the complaint is clearly expressed
- Try using keywords like “manager”, “refund”, or “complaint”
-
Manager Voice Not Changing
- Verify the
X-Ultravox-Response-Type
header is set - Check the voice parameter in the response body
- Verify the
Next Steps
Now that you’ve implemented basic escalation, you can:
- Implement different manager personalities for different situations
- Create a complaint logging system
- Add resolution tracking and follow-up mechanisms