Notes and Links Widget

The Notes & Links widget is similar to the free text widget but contains more formatting and display options.

Note: The Notes & Links widget does not support inline HTML.

Setup

  1. Enter the text you want to display. Markdown is supported.
  2. Select a preset template or customize the display options.
  3. Select a text size and the widget’s background color.
  4. To adjust the position of the text, click on the Alignment buttons. To not include padding, click No Padding.
  5. To include a pointer, click Show Pointer and select a position from the dropdown menu.
Adding text in the Markdown field of the Notes & Links widget editor

When you are ready to create the widget, click Save.

This widget supports template variables. Use the $<VARIABLE_NAME>.value syntax to dynamically update the widget content.

Using template variables in the Markdown field of the Notes & Links widget editor

In this example, $env.value updates the value of a link to the selected environment.

API

This widget can be used with the Dashboards API. See the following table for the widget JSON schema definition:

Expand All

Field

Type

Description

background_color

string

Background color of the note.

content [required]

string

Content of the note.

font_size

string

Size of the text.

has_padding

boolean

Whether to add padding or not.

default: true

show_tick

boolean

Whether to show a tick or not.

text_align

enum

How to align the text on the widget. Allowed enum values: center,left,right

tick_edge

enum

Define how you want to align the text on the widget. Allowed enum values: bottom,left,right,top

tick_pos

string

Where to position the tick on an edge.

type [required]

enum

Type of the note widget. Allowed enum values: note

default: note

vertical_align

enum

Vertical alignment. Allowed enum values: center,top,bottom

{
  "background_color": "string",
  "content": "",
  "font_size": "string",
  "has_padding": false,
  "show_tick": false,
  "text_align": "string",
  "tick_edge": "string",
  "tick_pos": "string",
  "type": "note",
  "vertical_align": "string"
}

Further Reading

Additional helpful documentation, links, and articles:

PREVIEWING: rtrieu/product-analytics-ui-changes