Embed Technologies: Web Component & iFrame¶
At Toucan Toco, we propose two technologies for embedding our solution:
- Web Component: It's the most recent technology used to embed a component. (more info here)
Iframe: It’s today the most common technology used and the oldest too.
Web Components have a built-in fall back mechanism. If we detect that the environment of your user doesn’t support Web Components we will automatically fall back to iframes.
Here are some pros and cons for both technologies.
Using our Web Component it simple as this:
All the intelligence is in the launcher, it will append our Web
Component to the
Embed Manager: how to generate and manage embed scripts ?¶
Note: At the moment, you can only create an embed configuration from the export interface from the Story.
The embed interface is not aimed at modifying the story configuration. To do so, you have to use the Studio.
The embed interface lets you configurate 3 options :
- Expiration Date: The story can be available only for a certain amount of time - by default none is configured.
- Allowed hosts: Specify which hosts will have access to this
embed. You can declare multiple hosts by separating them by a comma :
host1, host2. - by default all hosts are allowed (“*”).
- Use current story state: this toggle lets you decide whether you
prefer to freeze the story in its current state (requester, view and
date) or if you prefer the embed to use the default configured.
- Exemple using current story state : my default view is France but my current view is Spain. The generated embed will have the Spain view.
- When not using current story state the generated embed will have the France view.
How to interact with my embed visualization from my application ?¶
View (or report ) app requester¶
In some cases you’ll want to use the same visualization for various users.
For instance an analysis by country, which is similar for your 10 countries but with different data.
To avoid building and exporting 10 different visualizations (one for
each), you can manually overwrite
view (also called appRequester
report) value in the URL.
Here is an example of an embed script where I want to display data from
But generally, your
view has several columns because it’s the common
referential for all embeds. In that case, you can retrieve your
from a specific column (it should be unique identifier). For example
here, if my
view requester looks like this:
I can use it there:
Customizing an embed¶
You can customize all the colors with a simple interface in Toucan Studio.
For fonts, you can use our “Custom CSS” feature that lets you specify CSS rules. For now, you can only use a font host online. Let us know if it’s a big limitation for you.
For example, let’s use
Lato font to change the labels’ font of my
That’s the result