MicroReact ()  

MicroReact is the simplest way to add a small, clean reactions widget to your blog, website, portfolio - you name it. Adding it is a piece of cake. You'll only need any kind of string that identifies your content. It can be your website URL, path, a number, anything that's not ridiculous should work.

Just add this code:

<div style="width:100%;display:flex;align-items:center;justify-content:center;">
<iframe src="https://microreact.glitch.me/embed/index.html?id=" style="width: 275px;height: 100px;border: none;" frameborder="none" loading="lazy" title="Leave a reaction"></iframe>
</div>

Warning! I would recommend adding your website name to the id, or else it might colide with other people's widgets. If you want actual comments, I would recomment Giscus. It's super easy and can, just like MicroReact, be added to a fully static website - no servers or backend involved.

It should also be fairly easy to also use MicroReact with a framework like - well - React, you'll probably just need to find how to use an iframe in that framework.

Configuration

To add a parameter, add &name=value to the end of the iframe URL (? instead of & if it's the first parameter). To use multiple parameters, just add them on top of another.

• id (required): identifier for your widget. Without this MicroReact will error out.
• reactions (optional): list of reaction ids to adds. Useful if you want to restrict the number of available reactions. Reactions: 1 (👍), 2 (🎉) 3 (😀), 4 (😑), and 5 (👎). Default: 12345
• allowMultiple (optional): 1 or 0, depending if you want to allow the user to send multiple reactions, 1 being yes and 0 being no. Default: 0
• textColor (optional): Widget's text color as a URI encoded CSS color.
• bgColor (optional): Widget's background color as a URI encoded CSS color.
• font (optional): Widget's URI encoded font.
• api_base (optional): CountAPI instance hostname. Default: abacus.jasoncameron.dev

Example iframe URLs:

//microreact.glitch.me/embed/index.html?id=
//microreact.glitch.me/embed/index.html?id=&reactions=15
//microreact.glitch.me/embed/index.html?id=&allowMultiple=1&reactions=15
//microreact.glitch.me/embed/index.html?id=&api_base=countapi.example.com&bgColor=black&textColor=rgb(230%2C%20230%2C%20230)
//microreact.glitch.me/embed/index.html?id=&font=Comic%20Sans%20MS%2C%20cursive

How does it work?

Well, this just uses the amazing CountAPI replacement Abacus (CountAPI shut down without any warning, for example) to simply count, add and show reactions - all without your website needing to touch your backend.

If you're wondering why should I use this instead of making my own?, the short answer is that if you use this you don't need to care about styling, making sure your counting API doesn't shut down out of nowhere just like CountAPI and mantaining everything.

MicroReact is privacy-friendly, open-source, looks good by default and is pretty customizable.

- Tiago Rangel (last edited June 10, 2024)