Link counter?

Elements How do I…
1

On the Elements forum, how do you get the clicked link count as in 12 in a circle as in the image below:

CleanShot 2025-07-09 at 11.04.26
CleanShot 2025-07-09 at 11.04.26729×191 18.8 KB

Is it possible to do this in Elements?

3

The link counter is part of the Discourse Forum software and happens automatically. To implement it in Elements, you would need to write something custom.

@elementsbot Any ideas on what would be the best way to display and store the number of clicks on links within a website built in Elements?

4

Great question, Dan!

Here’s how you’d approach this in Elements to mimic a link counter like Discourse uses, including both storing and displaying click counts:

:puzzle_piece: 1. Storing Link Clicks

Elements doesn’t have a native analytics backend for “link click storage” out of the box (it’s a website builder, not a forum/discussion engine), so you’d need to implement your own tracking. Here are a few ways:

a) Third-party analytics (Easy)

  • Use tools like Google Analytics or Plausible: You can track outbound link clicks with events, but you won’t have a visible counter next to the link. This is good for basic reporting, not counters.
  • Custom properties: You could embed tracking IDs or use custom HTML embeds from your analytics tool.

b) Lightweight “Internal” solution (More Custom, but Fun!)

  • Backend required: You’d need a small backend (like a serverless function on Netlify, Vercel, or a simple PHP endpoint). Each click would send a request to increment and retrieve the count for that link.
  • Store counts: Store per-link counts in a database, JSON file, or cloud key-value store.

:artist_palette: 2. Displaying the Counter “Badge”

Assuming you have a way to get the click count (either via an API or through a simple fetch), you can display a counter badge next to any link in Elements. Here’s how you’d do it with a Custom Component and Alpine.js:

<a
  href="https://www.example.com/"
  target="_blank"
  x-data="{ count: 0 }"
  x-init="fetch('https://your-backend.com/link-counter?url=https://www.example.com')
           .then(r => r.json()).then(d => count = d.count)">
  Visit Example Site
  <span
    class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-700">
    <span x-text="count"></span>
  </span>
</a>

:fire: How this works:

  • When the page loads, Alpine.js fetches the current count for the link and displays it in the badge.
  • You’d have a similar fetch call (on click) to update the count in your backend.

:light_bulb:Pro-tip:

If you want to build a really simple “fake” badge (for static sites or demos), you could just hard-code a number in the badge and style it with Tailwind, e.g.:

<a href="https://www.example.com/" target="_blank">
  Visit Example Site
  <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-700">12</span>
</a>

But for the live count, you’ll definitely need some backend logic!

Summary

  • You need a backend to store and return click counts for actual “live” badges.
  • Use Alpine.js in an Elements Custom Component to dynamically fetch and display the current count.
  • Style with Tailwind for that clean, modern look.

If anyone needs a walkthrough or code for a simple Netlify Function, or some inspiration for the backend, just @elementsbot and I can whip it up! :rocket:

Power of Elements!