🖇️Integration

Embed Technologies: Web Component & iFrame

At Toucan, 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.

Our 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.

Simple Integration

Using our Web Component it simple as this:

<div>
   <script async src="https://myinstance.toucantoco.com/scripts/embedLauncher.js?id={EMBED_ID}" type="text/javascript"></script>
</div>

All the intelligence is in the launcher that will append our Web Component inside the div. You also have a programmatic way to do so with the SDK.

Embedded stories need its parent container to have a size (width and height).

Integration with frameworks

We're working with every modern web stacks.

Here an example with React:

React

• https://github.com/ToucanToco/tc-embed-react

It's even possible to embedding us in mobile native application !

Android

Sample code

String html = "<iframe style=\"border: 0; overflow: hidden;\" frameBorder=\"0\" height=\"100%\" width=\"100%\" src=\"https://MY_INSTANCE.toucantoco.com/embed.html?id=EMBED_ID\"></iframe>";

WebView webView = (WebView)findViewById('VIEW_ID');
webView.setWebViewClient(new WebViewClient());
webView.loadData(html, mimeType: "text/html", encoding: null);

WebSettings webSettings = webView.getSettings();
webSettings.setDomStorageEnabled(true); // **Without this line, the page displays the loading icon indefinitely and the embed never load. **
webSettings.setJavascriptEnabled(true);