Create upvote button widget
This article will explain how to create a upvote button and embed it in your notion page.
Step 1: Setup your upvote button widget
- click in the menu on Widgets
- you will see all kind of widgets we support at the moment
- click on "Upvote Button" card
- the customization page will load and you can now customize your widget
Properties that you can customize:
| Property | Description |
|---|---|
| Title of your Widget | Give your upvote button a name so you know which upvote have collected feedbacks. |
| Start value | Start value where the user will see at the first user. Note: psychologically it is better to start from a high number so that people are more likely to click on the upvote button. |
| Size | Set the size of the number and feedback icons. |
| Background | Define the background color of your upvote button. |
| Text Color | Set the text color of the number text. |
| Icon Color | Set the icon color of the icon. |
| Border Color | Set the color of the upvote button. |
| Round Style | Set the rounding style of the upvote button. 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. |
Step 2: Create your upvote widget
Once you have customized your upvote button, 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.
Step 3: Check upvote button statistics
Once you have added your upvote button to your notion document, visitors to your site will be able to click this upvote button. Each time a visitor clicks on up or down upvote button, we count all clicks from each visitor. You can always see the total upvote counter. With these steps, you can see the statistics of your upvote button:
- Click in the navigation bar on the menu "My Widgets"
- On this page, you will see all created widgets
- On the upvote button widget you will see a small icon in the action section
- When you hover with the mouse over this icon, it will show a tooltip with the current statistic
Only you can see the total upvote count of the people who have clicked on the upvote button. Because you can define a start value, the visitor will always see a higher number. This means that only you have the possibility to know the exact number of people who have clicked on this button.
Note: The upvote button provides visitors with a unique interaction opportunity. Every visitor has the opportunity to click the button to express their appreciation - however, they are only allowed to perform this process once. If the visitor accidentally clicks on the button again, the previous confirmation will be automatically revoked.
Step 4 (optional): Sync with Notion database
We also give you the possibility that the votes of the visitors are not only displayed in our app, but that they are also synchronised with your Notion database.
The picture shows how widgets link to a database. Each widget matches up with one row in the database. To make sure the right data goes into the right spot, you also need to say which column it should go into. This helps put everything in the right place.
How to connect your database with your widget?
In this section, we'll guide you on how to link your widget to a row in the Notion database.
That is what it needs:
- Select Notion database
- You have to select a database here which should be connected to your widget
- Select Notion column
- After you've chosen the database, it's time to pick the column where the vote will be recorded
- Select Notion row
- Now, simply choose a row from your database
- The title name and the current value of the row will be displayed
- Remember, you can only load up to 100 records at a time
In order for us to display the notion database, the Notion-Widgets app must be connected to your notion account. You can find out more here: How to connect your Notion workspace