> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blinkops.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom HTML

> Instructions on how to create and use the Custom HTML Widget

## Adding a Custom HTML Widget

<Steps>
  <Step title="Open the Widget Menu">
    In the *Edit Mode* tab of the Dashboards Building Interface, click the "add a widget" button.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/x5n7UL9TMIRH4lMC/img/Dashboards/AddWidgetBtn.png?fit=max&auto=format&n=x5n7UL9TMIRH4lMC&q=85&s=73eeae59ee0c39c4a45bd71d998e2e8e" width="1725" height="1080" data-path="img/Dashboards/AddWidgetBtn.png" />
    </Frame>
  </Step>

  <Step title="Select the Custom HTML Widget">
    Choose the **Custom HTML** option from the widget list.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/gKZ82eCBUlai557o/img/Dashboards/HTMLWidgetOption.png?fit=max&auto=format&n=gKZ82eCBUlai557o&q=85&s=bc5ad4102122fcd7a6c6881f0f1f4a61" width="866" height="541" data-path="img/Dashboards/HTMLWidgetOption.png" />
    </Frame>
  </Step>

  <Step title="Rename the Widget">
    In the sidebar in the top left corner, double-click on *Untitled widget* and provide a name for the selected widget.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/gKZ82eCBUlai557o/img/Dashboards/RenameHTMLWidget.png?fit=max&auto=format&n=gKZ82eCBUlai557o&q=85&s=427ae855bd61bd1ee23b0d36346c4542" width="1721" height="1082" data-path="img/Dashboards/RenameHTMLWidget.png" />
    </Frame>
  </Step>

  <Step title="Add HTML Content">
    Enter your HTML content (including `<script>` and `<styles>` tag). The HTML you add will automatically appear in the HTML widget.

    <Note>**Note**:The HTML widget supports both **static** and **dynamic** HTML</Note>

    <Tip>
      When exporting an HTML widget that contains **dynamic content** (such as animations, delayed rendering, or asynchronously loaded elements), add the following code to your script once all content has fully loaded and finished rendering:

      `parent.postMessage('html-widget:ready', '*');`

      This signals that the widget is ready to be captured, helping ensure the exported screenshot includes the fully rendered content.
    </Tip>

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/gKZ82eCBUlai557o/img/Dashboards/AddHTMLContent.png?fit=max&auto=format&n=gKZ82eCBUlai557o&q=85&s=7ab6e8b82607dffe286660c60728e9b2" width="3442" height="2162" data-path="img/Dashboards/AddHTMLContent.png" />
    </Frame>
  </Step>
</Steps>

## Editing a HTML Widget

Any changes made to the HTML, will be automatically applied to the HTML widget in real time.

## Deleting a HTML Widget

<Steps>
  <Step title="Select the HTML Widget">
    <p>In the left-hand sidebar, click the <Icon icon="square-ellipsis-vertical" iconType="solid" /> icon in the top-right corner and then select the delete button.</p>
  </Step>

  <Step title="Delete the HTML Widget">
    The HTML widget will be removed from your Dashboard Building Interface.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/gKZ82eCBUlai557o/img/Dashboards/DeleteHTMLWidget.png?fit=max&auto=format&n=gKZ82eCBUlai557o&q=85&s=3a300c1b6ae53b5b0eb4214a59d63cc2" width="1720" height="1077" data-path="img/Dashboards/DeleteHTMLWidget.png" />
    </Frame>
  </Step>
</Steps>