How to :: pass external variables to my embeds¶
Introduction¶
Sometimes you may want to pass variables to your embed without having to declare them inside Toucan Toco because it depends on a specific context on your application.
To do so, you can pass down your variables in embeds scripts:
<script async src="https://myinstance.toucantoco.com/scripts/embedLauncher.js?variables.my_var=foo" type="text/javascript"></script>
As you can see, you can add any key to our variables
parameter. If
you have to pass 2 parameters for instance, you’ll have to write:
<script async src="https://myinstance.toucantoco.com/scripts/embedLauncher.js?variables.my_var1="foo"&variables.my_var2="[\"foo\", \"bar\"]"" type="text/javascript"></script>
–
Important
In order to support
object
andarray
type, we’re parsing each variables. Make sure you have encoded it well (ex: use JSON.stringify)
Example¶
Setup in a story¶
After that, you can use your variables in the configuration of your
story. Thanks to extraVariables
you can template your variable
inside the story. For example, you can set a contextual commentary
.

extra-variables-configuration
Now you’ve got an error because the variables aren’t interpolated !

extra-variables-waiting-variable
Note that you can display a default value to avoid that state.

extra-variables-ternary-default-value
You should now have default value
interpolated.

extra-variables-default-value-result
Setup embed-side¶
Setting this:
<script async src="https://my-instance.toucantoco.com/scripts/embedLauncher.js?id={EMBED_ID}&variables.commentary=I am here to describe that amazing story!" type="text/javascript"></script>
We’ve got this:
And voilà!