How to create habit counter widget
This article will explain how to create a Habit Counter widget and embed it in your notion page.
Step 1: Select Habit Counter Widget
- click in the menu on Widgets
- you will see all kind of widgets we support at the moment
- click on "Habit Counter Widget" card
- The customization page will load and you can start to customize your widget
Step 2: How to use widget editor
Before we can start designing the widget, I need to briefly explain the preview. The widget has two states - Edit habit or Show habit counter mode. Here are the two states:
You can switch between the modes by pressing the Start Counter button or by pressing Reset button. The data entered in the preview is not taken into account when saving the widget. This is done later when using the widget in the embed version of it.
Please enter the name of the habit to start the tracking process.
Note: We save only style information of this widget. Name you enter in edit habit mode is not store in anytime.
Step 3: Configure your widget
Properties that you can configure:
General
| Property | Description |
|---|---|
| Title of your Widget | Give your habit counter widget a name so you know which habit counter is in use and you can make changes afterwards |
Title Styles
You can stlye the title of your habit counter widget.
| Property | Description |
|---|---|
| Font Color | Set the font color of the title section |
| Font Family | Set font family for the title section |
| Font Size | Set font size for the title section |
| Font Style | Set font style for the title section |
Counter Styles
You can style the counter text of your habit counter widget.
| Property | Description |
|---|---|
| Font Color | Set the font color of the counter section |
| Font Family | Set font family for the counter section |
| Font Size | Set font size for the counter section |
| Font Style | Set font style for the counter section |
Widget Styles
You can style the widget card of your habit counter widget.
| Property | Description |
|---|---|
| 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 3: Create your habit counter widget
Once you have customized your habit counter widget, you can click on the create button 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: When editing the widget after creation (e.g. color of title section), the time and name are not changed. This only happens in embedded mode of the widget.