Embed the Voice Bot Widget in a Call Flow

import Alert from "react-bootstrap/Alert";

Embed the Voice Bot Widget in a Call Flow

Once the admin connector has been established, the voice bot must be implemented directly inside the automated customer journey.

In this step, we will have to modify an inbound voice path using the Zoom Contact Center (ZCC) Flow Designer, drop in the third-party Bot Widget, and configure the initial inbound and outbound data passing structures.

Insert the Bot Widget into the Flow Canvas

First, we will have to access the visual scripting interface to position our third-party agent participant in the media stream.

1. Log into the Zoom Admin Portal.
2. Navigate to Contact Center Management → Flows.
3. Select and open your active inbound voice call flow to launch the visual canvas editor.
4. Locate the widget library widget tray on the left side of the screen.
5. Drag and drop the Bot Widget into your active call flow sequence (e.g., following an initial greeting or business-hours evaluation step).


Bind the Connector Profile and Extract the Target String

Next, we will have to link this workflow step to the custom application marketplace backend configuration we built previously.

1. Click on the newly positioned Bot Widget container to reveal its configuration properties panel on the right sidebar.
2. Locate the connector instance settings and choose the matching Connector Name (e.g., Dialogflow_Voice_Agent) from the dropdown parameters.
3. Review the widget's informational canvas parameters to locate the displayed 15-digit termination number string starting with 999....
4. Confirm this matches the telephony INVITE string captured during Step 3. This tells the core routing framework to direct user audio path channels straight to the external platform whenever this flow step executes.

Establish Outbound Variable Data Mapping

Next, we will have to structure how data leaves the Zoom engine to orient the third-party platform when it processes the inbound call.

Protocol Constraint: Outbound variable transfer directly within the widget profile interface currently supports SIP Headers Only. Outbound programmatic API payload delivery is not natively driven from this specific interface block.

1. Within the properties panel of the Bot Widget, navigate to the Variables Mapping or settings tab.
2. Select Outbound to Bot settings.
3. Map the Outbound Call Data: Configure the following standard SIP header strings to forward user detail parameters to the bot engine:
   • Map the dialed number field (To string attribute) to pass as: X-ZOOM-DNIS
   • Map the connector’s static webhook URL parameter to pass as: X-ZOOM-WEBHOOK


Architectural Best Practice: Passing the X-ZOOM-WEBHOOK value inside the outbound SIP header saves the third-party bot platform from maintaining a hardcoded internal mapping database. When the bot platform reads this header, it instantly knows the exact callback URL string it must target to return interaction details later.

Initialize the Inbound Mapping Architecture

Lastly, we will have to create a baseline structure for receiving details back from the voice bot when it readies a call to return to human agent queues.

1. Inside the widget settings interface panel, select the Inbound from Bot context options tab.
2. Toggle the data collection protocol configuration to accept data elements from the bot.
3. Define the parameter pathways:
   • For Lightweight Flags: Prepare standard SIP header lookups if your vendor platform is passing basic string primitives like simple routing intents or verification state values.
   • For Secure Context & PII: Direct the mapping parameters to prepare for incoming REST data fields. This layout ensures large blocks, notes fields, and transcript texts skip standard SIP log files.