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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-v3.toucantoco.com/visualizations-and-layouts/embedding/integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.