Dynamic Variables in Iframe

Learn how to pass dynamic variables to customize your embedded scenarios. This example features Princess Leia as a hiring manager who will greet you by name!

Important: When passing variables to scenarios, prefix parameter names with t_. For example, use t_name in the URL parameter, which maps to {{name}} in your scenario template. This allows Princess Leia to greet candidates by their actual name in this Star Wars-themed interview.

Reserved Variables: Some variables like user_name are automatically filled with the logged-in user's information when available.

Try the Interview

Enter your name and meet Princess Leia for a fun Star Wars-themed job interview

Candidate Name:

Generated URL:

/embed/minimal/685b0e7d112b48bea1292901?t_name=Ajitesh

How It Works

This example demonstrates passing dynamic variables to embedded scenarios using URL query parameters.

Enter the candidate's name in the input field
The URL is automatically updated with the name as a query parameter
Princess Leia (the hiring manager) receives this parameter and greets the candidate by name
Click "Start Interview" to begin the personalized Star Wars-themed interview

Scenario Context:

Princess Leia is a hiring manager at Tough Tongue AI looking for rock stars, AI wizards, or Star Wars fans. She'll greet candidates by name and ask about their qualifications in a fun, lighthearted way.

Scenario ID: 685b0e7d112b48bea1292901

Common Use Cases

Personalized greetings with candidate names (like this Princess Leia example)
Context-aware scenarios based on user role or department
Dynamic content based on user preferences or background
Interview scenarios tailored to specific positions
Training simulations with personalized characters
Multi-language support by passing locale parameters

Implementation Examples

<!-- Static example with hardcoded name -->
<iframe
  src="/embed/minimal/685b0e7d112b48bea1292901?t_name=John"
  width="100%"
  height="400px"
  frameborder="0"
  allow="microphone"
></iframe>

<!-- Dynamic example with JavaScript variable -->
<script>
  const candidateName = "Sarah";
  const scenarioId = "685b0e7d112b48bea1292901";

  // Build the URL with the t_name parameter
  const iframeUrl = `/embed/minimal/${scenarioId}?t_name=${candidateName}`;

  // Set the iframe source
  document.getElementById('my-iframe').src = iframeUrl;
</script>