---
title: "HTML Panel widget for dashboards"
canonical_url: "https://www.nutrient.io/guides/workflow-automation/admin-guide/settings/dashboards/using-the-dashboard-html-panel-widget-legacy/"
md_url: "https://www.nutrient.io/guides/workflow-automation/admin-guide/settings/dashboards/using-the-dashboard-html-panel-widget-legacy.md"
last_updated: "2026-05-14T16:53:43.956Z"
description: "Learn to use the HTML Panel widget to enhance your dashboard with announcements, buttons, links, and more for dynamic content management."
---

# Maximize dashboard capabilities with the HTML Panel widget

The HTML Panel widget can be added to your dashboard and is used frequently for a variety of purposes.

- Making an announcement

- Launch buttons

- Providing links to processes or external pages

- Displaying videos

- Adding third-party widgets

## Adding an HTML Panel widget

Open the **Dashboard editor** and select **Add Widget** from the upper-right corner of the dashboard area.![](@/assets/guides/workflow-automation/files/1099/dashboard-add-widget.png)

Select **HTML Panel**.![html panel widget](@/assets/guides/workflow-automation/files/1099/dashboard-html-panel-add.png)

## Editing the HTML Panel

The HTML Panel provides a rich text toolbar similar to a word processor but scaled down. You can format text, insert images, insert videos, add links, and more.

## Extending the HTML widget with styling

You can enhance your HTML Panel widgets beyond basic formatting by using inline CSS styles and custom HTML structures to create visually appealing layouts, button grids, and styled containers.

### Styled layouts

You can use inline styles and DIVs to create layout containers and tables with more flair.

For instance, consider the following image.![dashboard-button-grid.png](https://help7.integrify.com/hc/article_attachments/360031436553/dashboard-button-grid.png)

This was created using the following code:

```html

<div class="divTableHeading" style="display: table-header-group; background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%); border-bottom: 2px solid #444444;">

<div class="divTableRow" style="display: table-row; background: #00000;">

<div class="divTableHead" style="display: table-cell; border: 0px solid #AAAAAA; padding: 5px 5px; font-size: 18px; font-weight: bold; color: #ffffff; border-left: 2px solid #D0E4F5;">COLUMN 1</div>

<div class="divTableHead" style="display: table-cell; border: 0px solid #AAAAAA; padding: 5px 5px; font-size: 18px; font-weight: bold; color: #ffffff; border-left: 2px solid #D0E4F5;">COLUMN 2</div>

<div class="divTableHead" style="display: table-cell; border: 0px solid #AAAAAA; padding: 5px 5px; font-size: 18px; font-weight: bold; color: #ffffff; border-left: 2px solid #D0E4F5;">COLUMN 3</div>

<div class="divTableHead" style="display: table-cell; border: 0px solid #AAAAAA; padding: 5px 5px; font-size: 18px; font-weight: bold; color: #ffffff; border-left: 2px solid #D0E4F5;">COLUMN 4</div>

<div class="divTableHead" style="display: table-cell; border: 1px solid #AAAAAA; padding: 5px 5px; font-size: 19px; font-weight: bold; color: #ffffff; border-left: 2px solid #D0E4F5;">COLUMN 5</div>

</div>
</div>
<div class="divTableBody" style="display: table-row-group;">
<div class="divTableRow" style="display: table-row;">
<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

</div>
<div class="divTableRow" style="display: table-row;">
<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;"><button onclick="Integrify.startRequest({process_sid: 'ENTER SID'})" class="theme-primary md-raised md-button md-ink-ripple">BUTTON NAME</button></div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;">&nbsp;</div>

<div class="divTableCell" style="display: table-cell; border: 0px solid #AAAAAA; padding: 3px 2px; font-size: 13px;">&nbsp;</div>

</div>
</div>

```

Tables made using `<DIVs>` are more flexible than using straight HTML tables. However, since you can only use inline CSS styles (rather than a linked CSS style sheet), you may want to try some free tools for first creating and styling the DIV table and then turning the output into inline styles:

- [DIVTable.com](https://divtable.com/table-styler/) provides an easy tool for creating styled tables.

- [Emogrifier](https://www.myintervals.com/emogrifier.php) provides a way to merge CSS with HTML to create inline styles.
---

## Related pages

- [Enhance your dashboard with report widgets](/guides/workflow-automation/admin-guide/settings/dashboards/adding-a-report-to-a-dashboard-legacy.md)
- [Adding a KPI’s widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-a-kpi-widget.md)
- [How to add widgets to your dashboard](/guides/workflow-automation/admin-guide/settings/dashboards/adding-an-html-widget-to-your-dashboard-legacy.md)
- [Adding a report widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-a-report-to-a-dashboard.md)
- [Adding an HTML Panel widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-an-html-widget-to-your-dashboard.md)
- [Adding a DashForm widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-dashform-widget.md)
- [Adding Manage Requests widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-manage-requests-widget.md)
- [Adding a My Requests widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-my-requests-widget.md)
- [Adding a Monitor Requests widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-monitor-requests-widget.md)
- [Adding a Today’s Messages widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-today-messages-widget.md)
- [Adding a My Tasks widget](/guides/workflow-automation/admin-guide/settings/dashboards/adding-my-tasks-widget-to-dashboard.md)
- [How to assign and share dashboards](/guides/workflow-automation/admin-guide/settings/dashboards/assigning-and-sharing-dashboards-legacy.md)
- [Managing roles and permissions for dashboards](/guides/workflow-automation/admin-guide/settings/dashboards/assigning-and-sharing-dashboards.md)
- [Customize and enhance your dashboards](/guides/workflow-automation/admin-guide/settings/dashboards/configuring-dashboards-legacy.md)
- [How to create and manage dashboards](/guides/workflow-automation/admin-guide/settings/dashboards/creating-dashboards-legacy.md)
- [View or edit a dashboard layout](/guides/workflow-automation/admin-guide/settings/dashboards/configuring-dashboards.md)
- [Streamline your workflow with our dashboard interface](/guides/workflow-automation/admin-guide/settings/dashboards/dashboard-interface-legacy.md)
- [How to create and manage dashboards](/guides/workflow-automation/admin-guide/settings/dashboards/creating-dashboards.md)
- [Accessing dashboards and navigating the interface](/guides/workflow-automation/admin-guide/settings/dashboards/dashboard-interface.md)
- [Customize dashboards for improved user experience](/guides/workflow-automation/admin-guide/settings/dashboards/legacy-dashboard.md)
- [Streamline your workflows with launch buttons](/guides/workflow-automation/admin-guide/settings/dashboards/launch-buttons-legacy.md)
- [Customize dashboards for improved user experience](/guides/workflow-automation/admin-guide/settings/dashboards/modern-dashboard.md)