#how to add dynamic variables in elevenlabs react?

1 messages · Page 1 of 1 (latest)

lime barnBOT
#
AI-generated Answer for johnnyflaco

Short answer:

  • Define placeholders in your agent with {{variable_name}}.
  • Pass values at conversation start from your React app either via the React SDK, the web widget, or the public Talk-to URL.
  • All required variables must be supplied, or the platform will error.

How to do it (official methods):

  1. With the React SDK (@elevenlabs/react)
  • Start a session and include your dynamic variables in the conversation initiation payload. Dynamic variables are part of the initial “conversation_initiation_client_data” message (field dynamic_variables). See the React SDK startSession docs and the WebSocket handshake schema showing dynamic_variables.
  1. With the embeddable widget (works inside React apps too)
  • Set the dynamic-variables attribute to a JSON object string when embedding the widget:
    <elevenlabs-convai agent-id="your-agent-id" dynamic-variables='{"user_name":"John","account_type":"premium"}'></elevenlabs-convai>
    All dynamic variables your agent requires must be passed.
  1. With the public Talk-to page
  • Pass variables through the URL:
    • Base64 JSON: …/app/talk-to?agent_id=AGENT_ID&vars=BASE64_JSON
    • Individual params: …/app/talk-to?agent_id=AGENT_ID&var_user_name=John
      Individual var_ params take precedence if both are present.

Authoring placeholders and security:

  • Use {{variable_name}} in system prompts, first message, and tool params.
  • Built-in system variables (e.g., system__conversation_id, system__time_utc) are available automatically.
  • For sensitive data (tokens, IDs), prefix the variable with secret__ so it’s only used in headers and not sent to the LLM.

What happens if you miss one:

  • Calls can fail with “Missing required dynamic variables …” if a required variable isn’t supplied.

Additional context:

  • ElevenLabs recommends dynamic variables over overrides for personalization.

References (all official):

  • Dynamic variables guide: usage, system/secret vars, URL methods.
  • React SDK startSession overview.
  • WebSocket handshake showing dynamic_variables field.
  • Widget attribute for dynamic-variables.
  • Error if required variables are missing.
  • Recommendation to prefer dynamic variables over overrides.
mellow mauve
#

can you show me working exampel code like:

const conversation = useConversation({
serverLocation: 'eu-residency',
micMuted: isMuted,
overrides: {
agent: {
prompt: { prompt: fullSystemPrompt },
firstMessage: firstMessage,
language: voiceSettings.language as Language,
},
tts: {
voiceId: voiceSettings.voiceId,
},
},