EmojiSup Widget

Want a cool emoji bar like this on your site?

Add a free emoji reaction widget in seconds. No sign-up, no account, nothing to set up on our side.

Installation

In the HEAD section of your site, add:

<script src="https://api.emojisup.org/widget.js?4"></script>

In the BODY section, where you want the bar to appear, add:

<div data-emojisup></div>

That is the whole installation. Once loaded, the script attaches its stylesheet, scans the page for elements with the data-emojisup attribute and renders a reaction bar in each of them.

Widget identifiers

Each widget gets an identifier built from the page address, so one page can hold several widgets and every page keeps its own counters. Tracking parameters such as utm_source or fbclid are ignored, so a visitor who arrives from a campaign sees the same counters as everyone else.

You can set the identifier yourself:

<div data-emojisup id="my-article-42"></div>

If the identifier changes, the widget starts from scratch and its counters reset.

Options

Every option is an attribute on the same element, and every one of them can be left out.

data-emojisup-set — shows only the reactions you list, separated by commas:

<div data-emojisup data-emojisup-set="👍,❤️,🔥,🤣"></div>

data-emojisup-theme — picks the colours: light by default, dark for dark backgrounds, auto to follow the visitor's system setting.

data-emojisup-size — sets the scale: s, m by default, or l.

data-emojisup-align — places the row: left, center or right. Without it the reactions spread across the full width of the block.

<div data-emojisup data-emojisup-theme="dark" data-emojisup-size="l" data-emojisup-align="center"></div>

And the same widget with a dark theme, four reactions and centred:

Content loaded after the page

If the widget lives in content that arrives later, call this once the content is in place:

<script>
    emojiSup.update();
</script>

It rescans the page and starts any new widgets. To stop a widget from refreshing its counters, call emojiSup.destroy().

What the widget stores

The widget sets one cookie, ev_user_id, for a year. It holds a random identifier and nothing else: that is what lets the widget remember which reaction this visitor chose, so the choice survives a reload. With every request the widget sends the address of the page the bar sits on, which is how counters are kept per page. No names, no e-mail addresses, no form data.

Counters refresh while the tab is open and visible. In a background tab the widget stops asking the server, and after a couple of minutes without clicks it slows down on its own.

Questions

Is it really free? Yes, and there is no account to create.

How many widgets can one page have? As many as you need. Give each one its own id.

Can a visitor change the reaction? Yes. One reaction per visitor per widget: clicking another one moves the vote, clicking the same one takes it back.

Will the counters survive a redesign? Yes, as long as the page address, or the id you set by hand, stays the same.

Does it need jQuery? No. The script has no dependencies and weighs about 45 KB.