# Passing Extra Variables to Your Toucan Embed
In some cases, you may need to pass variables to your Toucan embed without predefining them in the Toucan platform. This allows flexibility depending on the specific context of your application.
**Passing Variables via Embed Script**
You can add variables to your embed script URL like this:
```html
```
You can add any key to the `variables` parameter. If you need to pass multiple variables, you can write:
```html
```
{% hint style="warning" %}
**Important**
For **object** or **array** types, ensure variables are JSON-encoded. Use `JSON.stringify` to properly format complex variables.
{% endhint %}
**Handling Multiple Variables**
When you need to pass numerous variables, including objects and arrays, it’s best to package them under a single `extra`key:
```javascript
var formattedVariables = JSON.stringify({
extra: { // super important to put all your variables under the "extra" key
varA: "simple_string",
varB: 42,
varC: {
childrenKey: "str"
},
varD: ["itemA", "itemB"]
}
})
// then used it programatically
var script = document.createElement('script');
script.src = `https://myinstance.toucantoco.com/scripts/embedLauncher.js?id=EMBED_ID&variables=${formattedVariables}`
// append it to your body or you parent div/component
document.body.appendChild(script);
// or in a template
```
### Example
#### Using Variables in Your Story Configuration
After setting up your variables, you can access them in the configuration of your story. With `extraVariables`, you can dynamically insert context-driven content into your story. This supports default values to avoid empty states.. For example, you can set a contextual `commentary`.
Note that you can display a default value to avoid that state.
You should now have `default value` interpolated.
### Dynamically Updating `extraVariables`
With our [SDK](/visualizations-and-layouts/embedding/embed-sdk.md), you can update `extraVariables` dynamically to connect them with UI components in your application.
```javascript
async function insertEmbedStory() {
const instance = await TcTcEmbed.initialize('{SDK_TOKEN}');
await instance.insertEmbedById(
'{EMBED_ID}',
document.getElementById('embed-story-container'),
{
token: '{USER_EMBED_TOKEN}',
}
);
instance.setExtraVariablesForAllEmbeds({ commentary: 'This is a commentary set by using the SDK function' });
}
```
[Link to the SDK API](https://docs-v3.toucantoco.com/visualizations-and-layouts/embedding/embed-sdk#setextravariablesforallembeds)
**You can also set it for a specific embed.**
```javascript
async function insertEmbedStory() {
const instance = await TcTcEmbed.initialize('{SDK_TOKEN}');
await instance.insertEmbedById(
'{EMBED_ID}',
document.getElementById('embed-story-container'),
{
token: '{USER_EMBED_TOKEN}',
}
);
const embed = await instance.get('{EMBED_ID}');
embed.setExtraVariables({ commentary: 'This is a commentary set by using the SDK function but for a specific embed' });
}
```
[Link to the SDK API](https://docs-v3.toucantoco.com/visualizations-and-layouts/embedding/embed-sdk#setextravariables)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs-v3.toucantoco.com/visualizations-and-layouts/embedding/integration/pass-external-variables.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.