> For the complete documentation index, see [llms.txt](https://docs-v3.toucantoco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-v3.toucantoco.com/visualizations-and-layouts/embedding/integration.md).

# 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](/visualizations-and-layouts/embedding/embed-sdk.md#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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.