# 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              |

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-8f267ad41f872dfa275f516b62e5f9c45fa3197a%2Fwc-iframe-pros-cons.png?alt=media" alt="pros-cons-embed-technologies"><figcaption></figcaption></figure>

### Easy Integration

**Embedding with Web Component**

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

The `embedLauncher.js` script handles all logic, automatically appending the Web Component inside the `div`. You can also use our [SDK](https://docs-v3.toucantoco.com/visualizations-and-layouts/embed-sdk#insertembedbyid) for a programmatic integration.

{% hint style="warning" %}
Ensure the parent container has defined dimensions (width and height) to display the embedded content correctly.
{% endhint %}

### 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](https://github.com/ToucanToco/tc-embed-react).

### Embedding in Mobile Applications

Embedding Toucan is also possible within mobile native applications!

#### Android Integration Example

{% code title="" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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