4 min readUpdated Mar 2, 2026

HTMLEmbedTile Documentation

Overview

The HTMLEmbedTile is a versatile component within the Vantage analytics and data platform, designed to render arbitrary HTML content dynamically. This allows users to customize their dashboard experience by embedding HTML elements such as charts, forms, videos, or any other HTML-based interface directly into their tiles. It utilizes an iframe to host the provided HTML content securely, ensuring that the embedded elements render correctly without interfering with the parent document.

Settings

1. `htmlContent`

Input Type: String
Description: This setting accepts a string of HTML content, which will be embedded within the tile. The HTML string can include various elements such as text, images, forms, or scripts, allowing for rich interactive content. If the htmlContent is empty or not provided, a default message will display, informing users to configure the tile.
Default Value: '' (an empty string)

Detailed Explanation of Behavior:

When htmlContent is populated with valid HTML, it will create a full HTML document, encapsulated in a proper structure, and render it within an iframe. The document includes basic CSS reset and styles that ensure that it occupies the entire tile space.
If there is no HTML content provided, the tile will display a message that prompts the user to edit the tile, thus improving usability and guiding users on how to initialize the content.

2. `minW`

Input Type: Numeric
Description: This setting indicates the minimum width of the tile when added to the dashboard. It is essential for layout management, helping maintain a clean and organized dashboard interface.
Default Value: 2

3. `minH`

Input Type: Numeric
Description: Similar to minW, this setting indicates the minimum height of the tile. Ensuring a minimum height can improve visibility and usability for the rendered content.
Default Value: 2

How It Works

The HTMLEmbedTile component starts by destructuring the htmlContent prop from its configuration.
It constructs a full HTML document structure that includes the necessary headers and CSS styles to ensure the content displays correctly and responsively.
The actual content is injected into the <body> of the HTML document using template literals.
The rendered HTML is displayed in an iframe, which has specific attributes set (sandbox, border, etc.) for security and layout management.
If no HTML content is provided, fallback content informs users that they need to configure the tile, ensuring a user-friendly experience.

Data Expectations

The primary data expected by the HTMLEmbedTile component is the htmlContent string. This content can be created using user input, generated via another system, or sourced from various data streams within the Vantage platform. Users should ensure that the HTML passed is well-formed to prevent rendering issues.

Use Cases & Examples

Use Cases

Embedding Custom Visualizations: Organizations can create custom data visualizations using libraries such as D3.js or Chart.js. By embedding these visualizations in the HTMLEmbedTile, users can display interactive graphs directly on their dashboards, making data-driven decisions easier.
Integrating Third-party Tools: Many businesses utilize external tools for data collection or presentation, such as forms or survey tools. HTMLEmbedTile allows these forms to be integrated seamlessly into the dashboard to gather input or feedback without redirecting users to another page.
Displaying Dynamic Content: A marketing team may want to display real-time promotions or embedded videos on their dashboard. By using the HTMLEmbedTile, they can showcase live updates right where users need them, improving engagement and interaction.

Example Configuration

Use Case: Embedding a D3.js Chart

Suppose a financial service company wants to visualize monthly sales data in their dashboard using a D3.js chart embedded in the HTMLEmbedTile.

Here is how the component might be configured:

json

{
  "config": {
    "htmlContent": "<div id='chart'></div><script src='https://d3js.org/d3.v7.min.js'></script><script>const data = [30, 86, 168, 281, 303, 365]; const width = 500; const height = 300; const svg = d3.select('#chart').append('svg').attr('width', width).attr('height', height); svg.selectAll('rect').data(data).enter().append('rect').attr('width', (d) => d).attr('height', 30).attr('y', (d, i) => i * 35);</script>"
  }
}

In this configuration:

The htmlContent includes a div for the chart and a D3.js script that dynamically generates a bar chart based on sales data.
This example shows how businesses can leverage interactive content directly within their dashboards, enhancing their reporting capabilities.

Users should tailor the htmlContent string according to their requirements to fully utilize the capabilities of the HTMLEmbedTile.

← PreviousSpacer Tile Next →Scenario Planner