# Link counter?

**URL:** <https://forums.realmacsoftware.com/t/link-counter/48698>\
**Category:** Elements\
**Created:** [July 9, 2025, 10:08am UTC](https://forums.realmacsoftware.com/t/link-counter/48698 "2025-07-09T10:08:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [July 9, 2025, 10:08am UTC](https://forums.realmacsoftware.com/t/link-counter/48698/1 "2025-07-09T10:08:01Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/5/450cc86787f907b187ff8fc4350ade4e204981ca.png)

Is it possible to do this in Elements?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 9, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/link-counter/48698/3 "2025-07-09T10:41:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 9, 2025, 10:42am UTC](https://forums.realmacsoftware.com/t/link-counter/48698/4 "2025-07-09T10:42:01Z")

</div>

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:

* * *

## 🧩 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.

* * *

## 🎨 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](https://docs.realmacsoftware.com/elements-docs/components-overview) and [Alpine.js](https://docs.realmacsoftware.com/elements-docs/api/alpine-js):

```html
<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>

```

#### 🔥 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.

* * *

## 💡 **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.:

```html
<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! 🚀

**Power of Elements!**