🖇️Integration

Embed Technologies: Web Component & iFrame

Toucan offers two options for embedding our solutions:

• Web Component: The latest embedding technology, designed for modern compatibility and seamless integration. Learn more about Web Components.

• iFrame: The most widely used and established method, known for its broad compatibility.

Our Web Components include a built-in fallback mechanism: if a user’s environment does not support Web Components, it will automatically switch to an iFrame embed.

Comparing Web Components and iFrames

Here are some key points to help you choose between Web Components and iFrames for embedding Toucan’s solutions.

Pros and Cons of Web Components vs. iFrames

Feature	Web Component	iFrame
Compatibility	Modern browsers	Widely supported
Performance	Optimized loading	Generally stable
Integration	Simple SDK setup	Standard HTML
Fallback	Automatic to iFrame if unsupported	N/A

Easy Integration

Embedding with Web Component

Embedding with a Web Component is as simple as placing the following code within a container:

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

The embedLauncher.js script handles all logic, automatically appending the Web Component inside the div. You can also use our SDK for a programmatic integration.

Ensure the parent container has defined dimensions (width and height) to display the embedded content correctly.

Framework Compatibility

Our embed technology is compatible with all modern web frameworks. Here’s an example for integrating with React:

React Integration Example You can explore our React integration example on GitHub: Toucan React Embed.

Embedding in Mobile Applications

Embedding Toucan is also possible within mobile native applications!

Android Integration Example

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, "text/html", null);

WebSettings webSettings = webView.getSettings();
webSettings.setDomStorageEnabled(true); // Required to avoid indefinite loading
webSettings.setJavascriptEnabled(true);

Make sure to enable DOM Storage and JavaScript for optimal functionality, as these settings are essential for loading embedded content in Android WebViews.