Sign in

Embed the Bubbles vote count

Show readers how many people on Bubbles have voted for your post. The widget renders as a small text link under your article. One line of HTML and one script tag is all you need.

Default snippet

Paste this anywhere in your blog post template, typically at the end of the article:

<div class="bubbles-vote"></div>
<script src="https://bubbles.town/vote.js" defer></script>

Renders as:

Minimal variant

A compact form without the label. Works well inline, for example next to an author name or date:

<div class="bubbles-vote" data-format="minimal"></div>
<script src="https://bubbles.town/vote.js" defer></script>

Renders as:

Emoji variant

Renders as plain text (a 🫧 bubble and the count), inheriting font, size, and color from the surrounding text. Perfect for afterword lines or byline footers where the widget should feel like part of the prose rather than a separate button. Inspired by wmprkr's Bear Blog integration. 

<div class="bubbles-vote" data-format="emoji"></div>
<script src="https://bubbles.town/vote.js" defer></script>

Renders as:

Which URL does it look up?

In this order:

  1. data-url="…" attribute on the mount div, if set
  2. A permalink found inside the surrounding <article> (rel="bookmark", or any link that resolves to a URL more specific than the current page)
  3. <link rel="canonical"> in the page head
  4. The current location.href

If your blog template shows the widget on both the listing page and the detail page, setting data-url explicitly is the most reliable option: 

<div class="bubbles-vote" data-url="https://your-blog.example/posts/my-article"></div>

What if the post isn't on Bubbles?

The widget renders nothing at all. Once the post is imported via feed polling, the count shows up on the next page load.

Styling

The widget uses two CSS custom properties you can override: 

.bubbles-vote-btn {
  --bt-fg: #666;        /* label color */
  --bt-accent: #2e8a7f; /* count + triangle color */
}

You can also override the classes directly: .bubbles-vote-btn, .bubbles-vote-num, .bubbles-vote-tri.

Privacy

The widget makes one anonymous GET request to bubbles.town/api/vote-count per mount point, without sending cookies. The script itself is the only third-party resource loaded.

Pinned version with Subresource Integrity

The default snippet loads vote.js and will receive any updates we ship. If you'd rather lock the script to an exact version, so a compromise at our end can't inject new code into your site, use the pinned URL below. You'll need to update the snippet manually when we release a new version. 

<script src="https://bubbles.town/vote-v1.js" defer
  integrity="sha384-iPZ+izwo1AOEa00AnHP7pK0fffeEeeP05nk7pfPCHkmDnyYpi7/hzWJoMUtsJNvl"
  crossorigin="anonymous"></script>