How to create habit counter widget

This article will explain how to create a Habit Counter widget and embed it in your notion page.

Habit Counter Widget in Action

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

Habit Counter 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:

Show both modes of the preview

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

Title and counter sections of widget

Properties that you can configure:

General

PropertyDescription
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.

PropertyDescription
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.

PropertyDescription
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.

PropertyDescription
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.

succesful created widget

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.