Tellius
  • ๐ŸšฉGetting Started
    • ๐Ÿ‘‹Say Hello to Tellius
      • Glossary
      • Tellius 101
      • Navigating around Tellius
      • Guided tours for quick onboarding
    • โšกQuick Start Guides
      • Search
      • Vizpads (Explore)
      • Insights (Discover)
    • โœ…Best Practices
      • Search
      • Vizpads (Explore)
      • Insights (Discover)
      • Predict
      • Data
    • โฌ‡๏ธInitial Setup
      • Tellius architecture
      • System requirements
      • Installation steps for Tellius
      • Customizing Tellius
    • Universal Search
    • ๐Ÿ Tellius Home Page
  • Kaiya
    • โ™Ÿ๏ธUnderstanding AI Agents & Agentic Flows
      • Glossary
      • Composer
      • ๐Ÿ—๏ธTriggering an agentic workflow
      • The art of possible
      • Setting up LLM for Kaiya
    • ๐ŸคนKaiya conversational AI
      • โ“FAQs on Kaiya Conversations
      • Triggering Insights with "Why" questions
      • Mastering Kaiya conversational AI
  • ๐Ÿ”Search
    • ๐Ÿ‘‹Get familiar with our Search interface
    • ๐Ÿค”Understanding Tellius Search
    • ๐Ÿ“Search Guide
    • ๐Ÿš€Executing a search query
      • Selecting a Business View
      • Typing a search query
      • Constructing effective search queries
      • Marketshare queries
    • ๐Ÿ”‘Analyzing search results
      • Understanding search results
      • Search Inspector
      • Time taken to execute a query
      • Interacting with the resulting chart
    • ๐Ÿ“ŠKnow your charts in Tellius
      • Understanding Tellius charts
      • Variations of a chart type
      • Building charts from Configuration pane
      • List of chart-specific fields
      • Adding columns to fields in Configuration pane
      • Absolute and percentage change aggregations
      • Requirements of charts
      • Switching to another chart
      • Formatting charts
      • Advanced Analytics
      • Cumulative line chart
    • ๐Ÿง‘โ€๐ŸซHelp Tellius learn
    • ๐Ÿ•ต๏ธโ€โ™‚๏ธSearch history
    • ๐ŸŽ™๏ธVoice-driven search
    • ๐Ÿ”ดLive Query mode
  • ๐Ÿ“ˆVizpads (Explore)
    • ๐Ÿ™‹Meet Vizpads!
    • ๐Ÿ‘‹Get familiar with our Vizpads
    • #๏ธโƒฃMeasures, dimensions, date columns
    • โœจCreating Vizpads
    • ๐ŸŒApplying global filters
      • Filters in multi-BV Vizpads
      • Filters using common columns
    • ๐Ÿ“ŒApplying local filters
    • ๐Ÿ“…Date picker in filters
      • Customizing the calendar view
    • โœ…Control filters
      • Multi-select list
      • Single-select list
      • Range slider
      • Dropdown list
    • ๐Ÿ‘๏ธActions in View mode
      • Interacting with the charts
    • ๐Ÿ“Actions in Edit mode
      • ๐Ÿ—จ๏ธViz-level actions
    • ๐Ÿ”งAnomaly management for line charts
      • Instance level
      • Vizpad level
      • Chart level
    • โณTime taken to load a chart
      • Instance level
      • Vizpad level
      • Chart level
    • โ™Ÿ๏ธWorking with sample datasets
    • ๐Ÿ”Swapping Business View of charts
      • Swapping only the current Vizpad
      • Swapping multiple objects
      • Configuring the time of swap
    • ๐Ÿค–Explainable AI charts
  • ๐Ÿ’กInsights (Discover)
    • ๐Ÿ‘‹Get familiar with our Insights
    • โ“Understanding the types of Insights
    • ๐Ÿ•ต๏ธโ€โ™‚๏ธDiscovery Insights
    • โž•How to create new Insights
      • ๐Ÿ”›Creating Discovery Insight
      • ๐Ÿ”‘Creating Key Driver Insights
      • ใ€ฐ๏ธCreating Trend Insights
      • ๐Ÿ‘ฏCreating Comparison Insights
    • ๐ŸงฎThe art of selecting columns for Insights
      • โžก๏ธHow to include/exclude columns?
  • ๐Ÿ”ขData
    • ๐Ÿ‘‹Get familiar with our Data module
    • ๐Ÿฅ‚Connect
    • ๐ŸชนCreate new datasource
      • Connecting to Oracle database
      • Connecting to MySQL database
      • Connecting to MS SQL database
      • Connecting to Postgres SQL database
      • Connecting to Teradata
      • Connecting to Redshift
      • Connecting to Hive
      • Connecting to Azure Blob Storage
      • Connecting to Spark SQL
      • Connecting to generic JDBC
      • Connecting to Salesforce
      • Connecting to Google cloud SQL
        • Connecting to a PostgreSQL cloud SQL instance
        • Connecting to an MSSQL cloud SQL instance
        • Connecting to a MySQL Cloud SQL Instance
      • Connecting to Amazon S3
      • Connecting to Google BigQuery
        • Steps to connect to a Google BigQuery database
      • Connecting to Snowflake
        • OAuth support for Snowflake
        • Integrating Snowflake with Azure AD via OAuth
        • Integrating Snowflake with Okta via OAuth
        • Azure PrivateLink
        • AWS PrivateLink
        • Best practices
      • Connecting to Databricks
      • Connecting to Databricks Delta Lake
      • Connecting to an AlloyDB Cluster
      • Connecting to HDFS
      • Connecting to Looker SQL Interface
      • Loading Excel sheets
      • ๐ŸšงUnderstanding partitioning your data
    • โณTime-to-Live (TTL) and Caching
    • ๐ŸŒทRefreshing a datasource
    • ๐ŸชบManaging your datasets
      • Swapping datasources
    • ๐ŸฃPreparing your datasets
      • ๐ŸคพActions that can be done on a dataset
      • Data Pipeline
      • SQL code snippets
      • โœ๏ธWriteback window
      • ๐ŸงฉEditing Prepare โ†’ Data
      • Handling null or mismatched values
      • Metadata view
      • List of icons and their actions
        • Functions
        • SQL Transform
        • Python Transform
        • Standard Aggregation
        • Creating Hierarchies
      • Dataset Scripting
      • Fusioning your datasets
      • Scheduling refresh for datasets
    • ๐ŸฅPreparing your Business Views
      • ๐ŸŒŸCreate a new Business View
      • Creating calculated columns
      • Creating dynamic parameters
      • Scheduling refresh for Business Views
      • Setting up custom calendars
    • Tellius Engine: Comparison of In-Memory vs. Live Mode
  • Feed
    • ๐Ÿ“ฉWhat is a Feed in Tellius?
    • โ—Alerts on the detection of anomalies
    • ๐Ÿ“ฅViewing and deleting metrics
    • ๐Ÿ–ฒ๏ธTrack a new metric
  • Assistant
    • ๐Ÿ’Introducing Tellius Assistant
    • ๐ŸŽคVoice-based Assistant
    • ๐Ÿ’ฌInteracting with Assistant
    • โ†–๏ธSelecting Business View
  • Embedding Tellius
    • What you should know before embedding
    • Embedding URL
      • ๐Ÿ“ŠEmbedding Vizpads
        • Apply and delete filters
        • Vizpad-related actionTypes
        • Edit, save, and share a Vizpad
        • Keep, remove, drill sections
        • Adding a Viz to a Vizpad
        • Row-level policy filters
      • ๐Ÿ’กEmbedding Insights
        • Creating and Viewing Insights
      • ๐Ÿ”ŽEmbedding Search
        • Search query execution
      • Embedding Assistant
      • ๐Ÿช„Embedding Kaiya
      • Embedding Feed
  • API
    • Insights APIs
    • Search APIs
    • Authentication API (Login API)
  • โœจWhat's New
    • Release 5.4
      • Patch 5.4.0.x
    • Release 5.3
      • Patch 5.3.1
      • Patch 5.3.2
      • Patch 5.3.3
    • Release 5.2
      • Patch 5.2.1
      • Patch 5.2.2
    • Release 5.1
      • Patch 5.1.1
      • Patch 5.1.2
      • Patch 5.1.3
    • Release 5.0
      • Patch 5.0.1
      • Patch 5.0.2
      • Patch 5.0.3
      • Patch 5.0.4
      • Patch 5.0.5
    • Release 4.3 (Fall 2023)
      • Patch 4.3.1
      • Patch 4.3.2
      • Patch 4.3.3
      • Patch 4.3.4
    • Release 4.2
      • Patch 4.2.1
      • Patch 4.2.2
      • Patch 4.2.3
      • Patch 4.2.4
      • Patch 4.2.5
      • Patch 4.2.6
      • Patch 4.2.7
    • Release 4.1
      • Patch 4.1.1
      • Patch 4.1.2
      • Patch 4.1.3
      • Patch 4.1.4
      • Patch 4.1.5
    • Release 4.0
Powered by GitBook

ยฉ 2025 Tellius

On this page
  • Getting the embedding URL
  • Including the obtained URL

Was this helpful?

Export as PDF
  1. Embedding Tellius
  2. Embedding URL

Embedding Vizpads

PreviousEmbedding URLNextApply and delete filters

Last updated 2 days ago

Was this helpful?

Using the following steps, you can embed (using iFrame) Vizpad 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

There are two ways in which you can obtain the embedding URL: directly from the Vizpad or from Settings.

From a Vizpad

  1. Open the required Vizpad under Explore, and click on the Share button at the top right corner.

Embedding from Vizpad
  1. Click on Generate Embed URL. Once the URL is generated, select the required permission (view/edit) and click on Copy.

From Settings

  1. Navigate Settings โ†’ Embed โ†’ Vizpads. The list of existing Vizpads is displayed.

  2. For the required Vizpad, click on the Copy button under Embed URL.

Including the obtained URL

An embedding URL looks like the following:

http://domain/dashboard/vizpadId/tabId/?utm_source=ID

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

Components of the embedding URL

  • vizpadId - the ID of the Vizpad to be embedded

  • tabId - As per the tabID specified in the embedding URL, the current tab will be set.

  • datasetId - the ID of the dataset to which the Vizpad belongs

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.

  3. After receivingTELLIUS_INITIALIZED message, the required filters can be applied.

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({
                actionType: "getVizpadFiltersApplied",
             }, "*");
        }
    }
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.

Structure of a Vizpad

Each Vizpad consists of one or more tabs. Each tab can have multiple Viz. A Viz is a chart widget, and it is a component of a Vizpad. The following sample code shows the structure of a Vizpad and a Viz.

Utmost, a Vizpad can have 10 tabs, and a tab can have 25 Viz.

sharings: []
vizPad: {vizItemsCount: 3, updatedAt: "2020-07-07T07:05:34.141827", title: "Untitled 202007061840",..}
    businessViewId: "enter_ID_of_business_view"
    colorPaletteId: "enter_ID_of_color_palette"
    createdAt: "2020-07-06T13:10:32.393827"
    elements: []
    gradientPaletteId: "ae5a3524-5d49-415d-901a-ecf6ecf376d8"
    id: "5e833be1-e904-4d3e-af27-99422d3ec2b7"
    owner: {username: "superUser", id: "ID_of_the_owner"}
    placement: []
    settings: {}
    sharedWith: []
    sharingByLink: true
    tabs: [{placements: [, โ€ฆ], name: "Tab 1", id: "45b78c0b-b690-4b08-a7de-0b7a980dc1fe", โ€ฆ}, {, โ€ฆ}]
        0: {placements: [, โ€ฆ], name: "Tab 1", id: "enter_ID_here", ...}
        1: {, โ€ฆ}
            id: "89cad4a5-944d-46b6-ac36-3401de292de3"
            name: "Tab 2"
            placements: [{vizTitle: "Title viz621", vizId: "ID_of_the_viz", sizeY: 4, sizeX: 4, ...}]
            thumbnail: "e0a8e8a0-4fa7-4875-a0a2-8c9b050d88f9"
            timeRange: {}
            title: "Title 202007061840"
            updatedAt: "2020-07-07T07:05:34.141827"
            vizItemsCount: 3

Structure of a Viz

{
    "vizType": "chart",
    "version": "3.4",
    "updatedAt": "2022-12-28T12:30:35.330508",
    "unuse": [],
    "title": "sum Row_ID by Country, Ship_Mode",
    "theme": {
        "vizBackground": {
            "transparency": "0.9",
            "image": "img/test",
            "color": "white"
        },
        "name": "dark",
        "color": "black"
    },
    "tab": "23b1dd9f-b756-4b38-9fb0-372e2e011aff",
    "sortBy": [],
    "size": {
        "width": 4,
        "height": 4
    },
    "secondaryGroupBy": {
        "stackBy": [],
        "colorBy": [
            {
                "columnName": "Ship_Mode"
            }
        ]
    },
    "placement": {
        "yDistance": 8,
        "xDistance": 4
    },
    "pagination": {
        "offset": 0,
        "maximumAllowedRows": 10000,
        "isTruncated": false,
        "allowPagination": true
    },
    "owner": {
        "username": "superUser",
        "id": "ID_of_owner"
    },
    "metadata": {
        "format": {
            "title": {
                "font": {
                    "weight": "normal",
                    "size": "16",
                    "color": "#000000"
                },
                "enabled": true
            },
            "legend": {
                "font": {
                    "weight": "normal",
                    "size": "14",
                    "color": "#78909c"
                },
                "enabled": true
            },
            "colorPaletteInfo": {
                "colors": [
                    "#3252DB",
                    "#0AB759",
                    "#D33131",
                    "#FF9F28",
                    "#05C4FF",
                    "#FFEA00",
                    "#EA08D5",
                    "#A1EA04",
                    "#4784ED",
                    "#00D9EF",
                    "#C62FBF",
                    "#029C01",
                    "#F44A10",
                    "#07C9AD",
                    "#FFEC40",
                    "#00EDED",
                    "#607D8B",
                    "#FED400",
                    "#00C802",
                    "#00D6B2",
                    "#ED3D00",
                    "#795548"
                ]
            },
            "background": {
                "enableGrid": false,
                "color": "#FFFFFF"
            },
            "axes": {
                "yAxis": {
                    "enabled": true
                },
                "xAxis": {
                    "enabled": true
                },
                "font": {
                    "weight": "normal",
                    "size": "14",
                    "color": "#78909c"
                }
            }
        },
        "dualAxis": true,
        "colorPalette": "ID_of_colorPalette"
    },
    "id": "047aed12-9871-49e5-a31a-9813817979b0",
    "createdAt": "2022-12-28T12:30:35.330502",
    "colorPaletteDetails": {
        "name": "Tellius 1",
        "id": "ID_of_colorPaletteDetails",
        "colors": [
            {
                "name": "#1565C0",
                "color": "#1565C0"
            },
            {
                "name": "#F57F17",
                "color": "#F57F17"
            },
            {
                "name": "#558B2F",
                "color": "#558B2F"
            },
            {
                "name": "#BF360C",
                "color": "#BF360C"
            },
            {
                "name": "#5E35B1",
                "color": "#5E35B1"
            },
            {
                "name": "#00838F",
                "color": "#00838F"
            },
            {
                "name": "#C62828",
                "color": "#C62828"
            },
            {
                "name": "#827717",
                "color": "#827717"
            },
            {
                "name": "#E65100",
                "color": "#E65100"
            },
            {
                "name": "#5D4037",
                "color": "#5D4037"
            },
            {
                "name": "#AD1457",
                "color": "#AD1457"
            },
            {
                "name": "#6A1B9A",
                "color": "#6A1B9A"
            },
            {
                "name": "#1976D2",
                "color": "#1976D2"
            },
            {
                "name": "#F9A825",
                "color": "#F9A825"
            },
            {
                "name": "#689F38",
                "color": "#689F38"
            },
            {
                "name": "#D84315",
                "color": "#D84315"
            },
            {
                "name": "#673AB7",
                "color": "#673AB7"
            },
            {
                "name": "#0097A7",
                "color": "#0097A7"
            },
            {
                "name": "#D32F2F",
                "color": "#D32F2F"
            },
            {
                "name": "#9E9D24",
                "color": "#9E9D24"
            },
            {
                "name": "#EF6C00",
                "color": "#EF6C00"
            },
            {
                "name": "#6D4C41",
                "color": "#6D4C41"
            },
            {
                "name": "#C2185B",
                "color": "#C2185B"
            },
            {
                "name": "#7B1FA2",
                "color": "#7B1FA2"
            },
            {
                "name": "#42A5F5",
                "color": "#42A5F5"
            },
            {
                "name": "#FFEB3B",
                "color": "#FFEB3B"
            },
            {
                "name": "#9CCC65",
                "color": "#9CCC65"
            },
            {
                "name": "#FF8A65",
                "color": "#FF8A65"
            },
            {
                "name": "#9575CD",
                "color": "#9575CD"
            },
            {
                "name": "#4DD0E1",
                "color": "#4DD0E1"
            },
            {
                "name": "#EF5350",
                "color": "#EF5350"
            },
            {
                "name": "#C0CA33",
                "color": "#C0CA33"
            },
            {
                "name": "#FF9800",
                "color": "#FF9800"
            },
            {
                "name": "#8D6E63",
                "color": "#8D6E63"
            },
            {
                "name": "#EC407A",
                "color": "#EC407A"
            },
            {
                "name": "#AB47BC",
                "color": "#AB47BC"
            },
            {
                "name": "#64B5F6",
                "color": "#64B5F6"
            },
            {
                "name": "#FFF176",
                "color": "#FFF176"
            },
            {
                "name": "#AED581",
                "color": "#AED581"
            },
            {
                "name": "#FFAB91",
                "color": "#FFAB91"
            },
            {
                "name": "#B39DDB",
                "color": "#B39DDB"
            },
            {
                "name": "#80DEEA",
                "color": "#80DEEA"
            },
            {
                "name": "#E57373",
                "color": "#E57373"
            },
            {
                "name": "#D4E157",
                "color": "#D4E157"
            },
            {
                "name": "#FFB74D",
                "color": "#FFB74D"
            },
            {
                "name": "#A1887F",
                "color": "#A1887F"
            },
            {
                "name": "#F06292",
                "color": "#F06292"
            },
            {
                "name": "#BA68C8",
                "color": "#BA68C8"
            },
            {
                "name": "#90CAF9",
                "color": "#90CAF9"
            },
            {
                "name": "#FFF59D",
                "color": "#FFF59D"
            },
            {
                "name": "#C5E1A5",
                "color": "#C5E1A5"
            },
            {
                "name": "#FFCCBC",
                "color": "#FFCCBC"
            },
            {
                "name": "#D1C4E9",
                "color": "#D1C4E9"
            },
            {
                "name": "#B2EBF2",
                "color": "#B2EBF2"
            },
            {
                "name": "#EF9A9A",
                "color": "#EF9A9A"
            },
            {
                "name": "#DCE775",
                "color": "#DCE775"
            },
            {
                "name": "#FFCC80",
                "color": "#FFCC80"
            },
            {
                "name": "#BCAAA4",
                "color": "#BCAAA4"
            },
            {
                "name": "#F48FB1",
                "color": "#F48FB1"
            },
            {
                "name": "#CE93D8",
                "color": "#CE93D8"
            }
        ]
    },
    "chartType": "line",
    "businessViewId": "ID_of_business_view",
    "axes": {
        "yAxis": [
            {
                "columnName": "Row_ID",
                "aggregation": "sum"
            }
        ],
        "xAxis": {
            "columnName": "Country"
        },
        "lineYAxis": [],
        "isMultipleAxes": false
    }
}
Generate embed URL
Embed URL from Settings
๐Ÿ“Š