๐Ÿ–‡๏ธ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

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);

Last updated