Table of Contents

Steps to embed Search

Ramya Priya Updated by Ramya Priya

Using the following steps, you can embed (using iFrame) components of Tellius (Vizpads, Insights, Search) into your app.

The embedded app refers to Tellius, whereas the embedding app refers to the app in which Tellius components are to be integrated.
  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 --> Search.
  2. Click on Generate Embed URL. The URL is displayed.
  3. Click on Copy to copy the embedding URL.

Including the obtained URL

An embedding URL looks like the following:

https://domain/search?jwt=userToken

Here, jwt refers to the token. Once you embed the URL, the Search page will be loaded.

If you want to deploy row-level permissions to the embedded Insight, then a uniquejwt (user token) needs to be generated using login API. For more details, check out this section.

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:

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.

Did we help you?

Search query execution

Contact