Create KPI widget for notion
This article will explain how to create a KPI widget and embed it in your notion page.
Step 1: Setup your KPI widget datasource
- click in the menu on Widgets
- you will see all kind of widgets we support at the moment
- click on "KPI Widget" card
- The customization page will load and you can now customize your widget
- Before you can style the KPI widget you need to select your notion database to read the values
| Property | Description |
|---|---|
| Select Notion database | Select the database to be used in the widget. You can search for the database by simply entering the name of the database. |
| Select Notion column | The column from which the value is to be read for the widget. The formatting of the value in the widget is configured in the values format step. |
Note: The two menu items define styles and define values format are active or selectable when the database and column are selected. The widget cannot be created without this selection.
Step 2: Define value format
We read the values from the defined column from the selected Notion database. To display a number in the KPI widget, you have the option of defining the format of the number as well as how the number should be calculated.
Properties that you can configure:
| Property | Description |
|---|---|
| Select Notion column | The column from which the value is to be read for the widget. |
| Aggregation | Define how the payment should be calculated. The following settings are possible:
|
| Data Type | Define the data type which is displayed. The follwing settings are possible:
When you select currency, you have the option to select the specific currency. You can search for the name of the currency or enter the ISO Code of the currency in the search field. Example: For US Dollar you just use USD or Candian Dollar just CAD, or Euro just EUR |
| Rounding | Define how the number should be rounded. The following options are available:
|
Step 3: Define style of the widget
Once the value has been correctly displayed and calculated, you can now start styling your KPI widget.
The following properties you can customize:
| Property | Description |
|---|---|
| Title of your Widget | Give your KPI widget a name |
| Title Style | |
| Headline | Set headline for your KPI widget |
| Font Color | Set font color for the headline |
| Font Family | Set font family for the headline |
| Font Size | Set font size for the headline |
| Font Style | Set font style for the headline |
| Values Styles | |
| Font Color | Set font color for the calculated value |
| Font Family | Set font family for the calculated value |
| Font Size | Set font size for the calculated value |
| Font Style | Set font style for the calculated value |
| Widget Style | |
| Round Style | Set the rounding style of the widget. You can choice between 5 styles. |
| Border Size | Set border stroke size. The bigger the number the thicker the stroke around the widget will be. |
| Background | Set background color for the widget |
| Border Color | Set border color for the widget |
| Padding | Set padding between widget edge and displayed number. |
Step 4: Create your KPI widget
Once you have customized your KPI widget, you can click on the create Widget so that the widget will be created.
After successfully creating your widget, you can copy the link and add it to your page in Notion.
Note: The data is always read out live when the widget is displayed. This means that if changes are made in the database, these are immediately reflected in the widget.