# Custom Widget

> Display your own messages, web pages, images, or help on a dashboard — for example service windows or how to escalate cases.

Source: https://docs.capaone.com/performanceguard/dashboards-and-widgets/widgets/custom-widget/  
Product: PerformanceGuard — a separate CapaSystems product; do not apply this page to any other.

The **Custom** widget is useful when you want to display messages on dashboards, for example about service windows, planned downtime, or how to escalate support cases.  
The widget can also include web pages, help, images or information about your organization's procedures directly on dashboards.  
![](/attachments/performanceguard/f6c69fd7-aedb-41d7-a6ef-aa2cd56ebec5.png)  
The widget is initially very simple, and everything you write will initially appear on a single line. However, if you have the right to manage widgets, you can format your text and include web pages, images and links in the widget with these tags and features:

- **Paragraph**: `<p>paragraph text</p>`

:::note[Important]
To specify the color of the paragraph text, include a color parameter. Example: `<p style="color:#FF0000;">text</p>` will make the text an attention-grabbing red.
:::
- **Line break**: `<br>`
- **Bold**: `<b>text</b>`
- **Italics**: `<i>text</i>`
- **Link**: `<a href="URL">link text</a>`

:::note[Important]
To make the link open on a new browser tab, include a target parameter: `<a href="URL" target="_blank">text</a>`
:::
- **E-mail link**: `<a href="mailto:e-mail address">link text</a>`
- **Image**: Click **EMBED AN IMAGE**.

:::caution
You must link to an image on the internet; you can't upload the image to PerformanceGuard.
:::
- **Web page**: Click **EMBED A WEB PAGE**.

:::note[Important]
When you add a web page, PerformanceGuard automatically creates the required HTML code. If the web page has scroll bars, try to adjust the size of the widget. If that doesn't help, and you don't want the scroll bars, you can remove them if you add these style elements and a scrolling="no" parameter to the HTML code:

**XML**

```html
<style>
   div {overflow:hidden}
   iframe {overflow:hidden}
</style>
<iframe src="URL" class="fill" scrolling="no"></iframe>
```

:::

:::tip
You can view the web page in the widget while you set it up, so it's easy to experiment and find the best widget size.
:::

:::caution
When a widget contains a web page, it can't have any other content.
:::
- **Numbered list**: `<ol> <li>Text <li>Text </ol>`
- **Bullet list**: `<ul style="list-style-type:disc"> <li>Text <li>Text </ul>`

:::tip
If you want more examples of what you can do with HTML, try [**w3schools.com**](http://www.w3schools.com/html/).
:::

:::caution
X-Frame-Options in HTTP response headers can be used to prevent that web pages are rendered in iframes. This can prevent embedded web pages from working in the widget. You can read more about X-Frame-Options on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
:::