# Embedding Insights

Using the following steps, you can embed (using iFrame) Insights into your app.

{% hint style="info" %}
The **embedded app** refers to Tellius, whereas the **embedding app** refers to the app in which Tellius components are to be integrated.
{% endhint %}

1. Get the embedding URL from Tellius.
2. Include the embedding URL in the HTML of the required app.
3. Connect the app with Tellius.

### **Getting the embedding URL**

1. Navigate **Settings → Embed → Insight**. The list of existing Insights is displayed.
2. For the required Insight, click on the **Copy** button under Embed URL.

<figure><img src="https://files.helpdocs.io/6dnnwn52e3/articles/9mt445bz63/1674118274195/image.png" alt="" width="563"><figcaption><p>Embed URL Insights</p></figcaption></figure>

### **Including the obtained URL**

An embedding URL looks like the following:

`https://domain/discover/insight/insightID/driverID?utm_source=ID`

Once you embed the URL, the required Insight will be loaded.

#### **Components of the embedding URL**

* `insightID` - the ID of the Insight to be embedded
* `driverID` - the ID of the driver from an Insight

### **Connecting with Tellius**

1. The embedding app needs to send a message `INITIALIZE` to connect with Tellius.
2. Tellius validates and responds with `TELLIUS_INITIALIZED` message as an acknowledgment.

The following is a sample code to connect with Tellius:

```javascript
var telliusFrame ;
    document.querySelector("iframe").addEventListener("load", function() {
        telliusFrame = document.getElementsByTagName("iframe")[0].contentWindow;
        telliusFrame.postMessage('INITIALIZE', "*");
    })
    function receiveMessage(event) {
        if(event.data === 'TELLIUS_INITIALIZED') {
            telliusFrame.postMessage({   //if you want to include an actionType 
                actionType: "required_actionType",
             }, "*");
        }
    }
window.addEventListener("message", receiveMessage, false);
```

As furnished in the code above, we use `window.postMessage` for communication between Tellius and the embedding app (two-way communication). The messages which are sent to Tellius from the embedding app are included in `telliusFrame.postMessage()`. With the help of the function `postMessage`, required actions can be performed.

To enable this communication and to receive messages, the embedding app needs to have `eventListener`. For every point clicked, or area selected/highlighted in the chart, Tellius will send a message to the embedding app.