How to use the counter widget
- Customize the label, color, theme, and starting value above.
- Click Copy code to copy the HTML to your clipboard.
- Paste it into any HTML block on your site.
- Save / publish — your counter is live.
Popular use cases
- Classroom websites: attendance, behavior points, reading minutes.
- Event pages: live attendee count, ticket scans, headcount.
- Fitness blogs: rep counter embedded next to workout descriptions.
- Crowdfunding / fundraising: donation milestones, signup counts.
- Productivity sites: Pomodoro session counter, habit streaks.
- Game / hobby blogs: score tracker, dice rolls, stitch counts.
How to add a counter to a Notion page
Notion has no built-in counter block, so the usual workaround is a checkbox database or a formula, both of which take longer to set up than they are worth for something as small as counting glasses of water. Embedding this widget takes about ten seconds instead. Pick the Notion tab above, choose a preset or type your own label, copy the link, then paste it on an empty line in Notion and choose Create embed rather than Dismiss or Bookmark. The block appears inline and you can drag its bottom edge to make it shorter or taller.
A few things worth knowing before you build a habit tracker around it. The number lives in the browser session, not in your Notion database, so it resets when you reload the page — that makes it perfect for counting through a single day, workout, or study session, and unsuitable for a long-running total you want to look back on next month. Set the starting value to whatever you want the block to open on. Notion embeds render on mobile as well, so a tap counter you set up on a laptop works in the phone app too. If the block shows a plain link instead of the counter, you clicked Dismiss when the paste menu appeared; delete the line and paste again, then pick Create embed.
Common setups people use it for: glasses of water per day, pomodoro sessions finished, pages or chapters read, reps in a home workout log, chores completed by each child, and inventory counted while walking a stockroom with a Notion page open.
How to add a death counter overlay to OBS or Streamlabs
Streamers usually want the same three things: a big readable number, no box around it, and a way to add one without alt-tabbing out of the game. Choose the OBS tab above and the widget switches to a transparent background with extra-large digits and a soft shadow so the number stays readable over bright gameplay. Copy the link, then in OBS click the plus under Sources, add a Browser source, paste the link into the URL field, and set the width and height shown above. Click OK and drag the number wherever you want it on the canvas.
Because the background is genuinely transparent rather than a dark panel, your game or camera shows through everywhere except the digits and the three buttons. To count without leaving the game, right-click the source and choose Interact — a small window opens where the space bar adds one, the down arrow subtracts one, and the R key resets to your starting number. Many streamers park that Interact window on a second monitor for the whole session.
Set the accent colour to match your stream branding, and pick a label that fits the run: Deaths for a soulslike, Wins for a battle royale, Attempts for a speedrun, Subs for a goal you are chasing on stream. The same link works in Streamlabs Desktop, XSplit, and any other software with a browser source, and nothing needs installing on your machine.
Is it really free?
Yes — completely free, no signup, no API key, no rate limit. The widget shows a small "Powered by SimpleCounter.co" link at the bottom, which is how we keep it free.
Does it track visitors?
The widget loads in an iframe from simplecounter.co. We use standard Google Analytics on our domain (with consent mode), but the counter value itself stays on the visitor's device — we don't store or transmit it.
Every option the widget accepts
The customizer above writes its values into the address after ?. If you would rather hand-write the address than use the form, these are what it understands:
label— the caption shown above the number. Anything you like up to about thirty characters; longer text will be cramped in a narrow frame. Leave it out and the widget says Count.start— the number the counter begins on. Whole numbers only, and negatives are accepted. Anything that is not a number falls back to zero.theme—light,dark, ortransparent. Transparent removes the background entirely and adds a soft shadow behind the text, which is what you want for a stream overlay. Anything else, including a missing value, gives you the light panel.color— the accent colour of the buttons and number, as a six-digit hex code. Write it without the#, so2563ebfor blue. Omit it and you get the default green,22c55e.size—sm,md,lg, orxlfor the size of the number.mdsuits a sidebar,xlis meant for stream overlays and screens seen from across a room.step— how much each tap adds or subtracts. Defaults to 1; set it to 5 or 10 when you count in batches.align—centerby default, orleftto push the number to the left edge, which is handy when the overlay sits in a corner of a stream.keys— keyboard shortcuts are on by default: space or the up arrow adds, the down arrow subtracts, and R resets. Addkeys=0to turn them off if the widget sits inside a page where the space bar should scroll instead.
Width and height are not part of the address; they are attributes on the frame itself, so you can change them in the pasted HTML at any time without touching the rest. Roughly 320 by 320 pixels suits a sidebar, while 400 by 400 or larger is easier to tap on a phone. Keep max-width:100% in the style attribute so the frame shrinks rather than overflowing on small screens.
What the widget deliberately does not do
It is worth being straight about the limits before you build something around it. The count is not shared between visitors: each person who loads your page gets their own counter starting at your chosen value, so this is not a visitor counter or a live public tally. The count is not saved anywhere either, so refreshing the page returns it to the starting number. There is no webhook, callback, or API, and nothing is written back to your site. If you need a total that several people add to at once, or one that survives a reload, you need a counter with a server behind it, which this is not.
What it is very good at is giving a reader something to tap while they are on your page. A knitting pattern with a row counter beside it, a workout post with a rep counter, a tutorial where readers count along as they follow the steps: in all of those the count only needs to last as long as the visit, and a widget that needs no account and no backend is exactly the right tool.
Adding it to common site builders
Every platform below accepts the pasted HTML unchanged; the only difference is where the box lives. In WordPress, add a Custom HTML block in the block editor, or switch to the Code editor in the classic editor, then paste. In Ghost, type /html to insert an HTML card. In Webflow, drag in an Embed element from the Add panel. In Wix and Squarespace, look for the Embed HTML or Code block. In Notion, paste the widget address on its own line and choose Create embed rather than pasting the HTML. On a hand-written page, drop it straight into the body.
Two platform quirks catch people out. Some hosted plans strip HTML blocks entirely on their free tiers, in which case no amount of correct code will work and the plan has to change. And a visual editor will sometimes re-escape the code if you paste it into a rich-text box instead of an HTML box, which leaves the markup visible as text on the page; paste it into the HTML block and it renders properly.
If the widget does not appear
A blank space where the frame should be almost always comes down to one of four things. The code may have gone into a rich-text field rather than an HTML field, which is the most common cause by a wide margin. Your page may be served over plain http, in which case browsers block the secure frame; serving your own site over https fixes it. A privacy extension or content blocker on your own browser may be blocking third-party frames, so it is worth checking in a private window before assuming your visitors see the same thing. Or a content security policy on your site may exclude our domain, which needs simplecounter.co permitted as a frame source.
If the frame appears but is cut off, the height is too small for the label and buttons; raise it until the whole panel is visible. If the colour is ignored, check that the hex code has six characters and no #.
Keeping it accessible and fast
The generated code already includes the two attributes that matter. The title attribute is what a screen reader announces when it reaches the frame, and you are welcome to change it to something more specific such as "Row counter for this pattern" so it describes its purpose on your page rather than ours. The loading="lazy" attribute means the widget is only fetched when the reader scrolls near it, so a counter low down a long article costs nothing at page load. Leave both in place.