Creating Widgets

Now that you've connected your Notion workspace and databases, it's time to create your first widget! This guide will walk you through the widget creation process.

Notionarise offers several widget types, each designed for different use cases:

The Heatmap Widget displays your activity in a GitHub-style calendar grid. Perfect for:

Visualizing habit consistency
Tracking daily task completion
Monitoring workout frequency
Analyzing productivity patterns

Features:

Color-coded intensity levels
Customizable color schemes
Multiple data sources
Hover tooltips with details

The Levels Widget gamifies your progress with an RPG-style leveling system:

Earn XP for completing tasks
Level up as you achieve more
Visual progress bars
Customizable XP calculations

Perfect for:

Motivating long-term goals
Tracking skill development
Gamifying daily routines
Building positive habits

Simple yet effective Progress Bars show completion percentage:

Goal tracking
Project milestones
Habit streaks
Target achievement

Streak Counter

Track consecutive days of achievement:

Current streak display
Best streak record
Streak history
Motivational messages

Statistics Dashboard

Comprehensive overview of your data:

Total completions
Average performance
Trends and patterns
Custom metrics

Step 1: Navigate to Widgets

Log in to your Notionarise dashboard
Click Widgets in the sidebar
Click the Create Widget button

Select the widget type that best fits your needs:

For habit tracking → Heatmap
For gamification → Levels
For goal tracking → Progress Bar
For consistency → Streak Counter
For overview → Statistics Dashboard

Step 3: Configure Basic Settings

Give your widget a name and description:

Widget Name: My Habits Heatmap
Description: Track my daily habits completion

Best Practices:

Use descriptive names
Add notes about the widget's purpose
Tag widgets for easy organization

Step 4: Add Connections

Connect your widget to Notion databases:

Click Add Connection
Select connection type (e.g., "Habits")
Choose your Notion database
Map database fields to widget fields
Save the connection

Example Configuration:

Connection Type: Habits
Database: My Habit Tracker
Field Mappings:
  - Habit → "Habit" (Relation)
  - Date → "Date" (Date)
  - Status → "Completed" (Checkbox)

For detailed information on setting up connections, see Connecting Databases.

Step 5: Customize Appearance

Personalize your widget's look:

Color Schemes:

Light mode colors
Dark mode colors
Custom color palettes
Gradient options

Size & Layout:

Widget dimensions
Font sizes
Spacing and padding
Border styles

Display Options:

Show/hide labels
Date format
Number formatting
Animation effects

Step 6: Preview & Test

Before embedding:

Click Preview to see your widget
Test with sample data
Verify all connections work
Check appearance in both themes
Test on different screen sizes

Step 7: Get Embed URL

Once satisfied with your widget:

Click Publish
Copy the widget embed URL
The URL will look like: https://widgets.notionarise.com/w/abc123

Embedding in Notion

Embedding Steps

Open your Notion page
Type /embed to open embed block
Paste your widget URL
Resize the embed to your preference
Done! Your widget is now live

Sizing Recommendations

Optimal embed sizes for different widgets:

Heatmap: 800px width × 200px height
Levels: 400px × 200px
Progress Bar: 600px × 100px
Streak Counter: 300px × 150px
Statistics: 800px × 400px

Advanced Settings

Date Range

Control which data is displayed:

Last 7 days
Last 30 days
Last 90 days
Last year
Custom range
All time

Filters

Refine which database entries are included:

// Example filter configuration
{
  "status": "completed",
  "priority": ["high", "medium"],
  "tags": {
    "include": ["important"],
    "exclude": ["archived"]
  }
}