how to load dynamic variables in react | ElevenLabs | Page 1

dawn grottoBOT Sep 12, 2025, 6:19 PM

#

AI-generated Answer for johnnyflaco

Here are the ElevenLabs‑supported ways to load dynamic variables from a React app:

Using the web widget in React (recommended for simplest setup)

Place the custom element in your JSX and pass the dynamic-variables attribute as a JSON string:
<elevenlabs-convai agent-id="your-agent-id" dynamic-variables='{"user_name":"John","account_type":"premium"}'></elevenlabs-convai>
Note: the widget must point to a public agent (authentication disabled). (elevenlabs.io)
The attribute must be a JSON string; all variables required by your agent must be provided. (elevenlabs.io)
Define {{variable_name}} in your agent’s prompt/first message/tool params to consume these values. Supported types: string/number/boolean. (elevenlabs.io)

Using the React SDK or your own WS/WebRTC client

Dynamic variables are sent at conversation start in the “conversation initiation client data” payload under dynamic_variables. If you manage the connection yourself, send a message like:
{ "type": "conversation_initiation_client_data", "dynamic_variables": { "user_name": "John", "account_status": "premium" } }
when opening the session. (elevenlabs.io)
The React SDK handles session setup; consult the “Personalization” structure to shape your initiation data if you’re building a custom transport layer. (elevenlabs.io)

Linking to the public Talk‑to page (useful for embeds/links from React)

Pass dynamic variables via URL:
- Base64 JSON: …/app/talk-to?agent_id=...&vars=BASE64_JSON
- Individual params: …/app/talk-to?agent_id=...&var_user_name=John&var_account_type=premium
  If both are present, var_ parameters take precedence. (elevenlabs.io)

Additional notes

System variables (prefixed system__) are auto‑available (e.g., system__conversation_id, system__time_utc). For secrets that must never go to the LLM, prefix with secret__. (elevenlabs.io)
Troubleshooting: ensure exact variable names, double‑curly syntax in prompts, and correct types. (elevenlabs.io)

If you need code-level examples specific to your React setup (widget vs. custom WS/WebRTC), tell me

old yoke Sep 12, 2025, 9:03 PM

#

is it possible to override tools?

dawn grottoBOT Sep 12, 2025, 9:03 PM

#

AI-generated Answer for johnnyflaco

Short answer: not via “overrides.” ElevenLabs conversation overrides only let you replace the system prompt, first message, language, and voice for a session—not which tools an agent uses. (elevenlabs.io)

What you can do:

Enable/disable and customize descriptions of built‑in system tools (e.g., end_call, language_detection). Their functionality and names are fixed and referenced via prompt.built_in_tools—you can’t replace/override them with your own implementation. (elevenlabs.io)
For custom Client or Server tools, update or replace the tool definitions and then point the agent at the new tool IDs (prompt.tool_ids) or manage them in the dashboard. Use the Tools API (POST/GET/PATCH/DELETE /v1/convai/tools). This is configuration, not an “override.” (elevenlabs.io)
Pass runtime data into tool parameters using Dynamic Variables, and even update variables from tool responses, but this doesn’t override the tool itself. (elevenlabs.io)

If you meant something else by “override tools” (e.g., swapping tool behavior per user in React), let me know and I’ll point to the exact doc section. (elevenlabs.io)

old yoke Sep 12, 2025, 9:45 PM

#

can we dynamically populate the transfernumber/sip uri? in the transfer call tool

dawn grottoBOT Sep 12, 2025, 9:45 PM

#

AI-generated Answer for johnnyflaco

Short answer: No — the transfer destination must be preconfigured in the agent’s Transfer to Human tool. The LLM must call the tool with a transfer_number that matches one of the phone numbers or SIP URIs you defined in the tool’s transfers list; arbitrary numbers/URIs passed at runtime are not accepted. (elevenlabs.io)

Details and limits:

You can predefine multiple rules (phone or SIP URI) with conditions; the LLM will choose among them. (elevenlabs.io)
SIP URIs are only supported when using SIP REFER transfers on SIP trunk calls, and your SIP trunk must allow SIP REFER. (elevenlabs.io)
Twilio numbers can transfer only to Twilio-hosted numbers; use SIP trunking if you need external transfers. (elevenlabs.io)
Dynamic variables exist and can be used to influence logic/tool calls, but they don’t bypass the requirement that the destination be one of the configured transfers. (elevenlabs.io)

If you need different destinations at runtime, update the agent’s transfer rules via the API before the call, then the tool can select from those newly configured options. (elevenlabs.io)

old yoke Sep 12, 2025, 9:47 PM

#

yes i understand. but can i give the sipuri as dynamic variable?

#how to load dynamic variables in react