https://github.com/bellmano/umami-github-badges

Generate GitHub badges for your Umami analytics data
https://github.com/bellmano/umami-github-badges

badge badges css github-badge github-badges html javascript umami umami-analytics website

Last synced: 2 months ago
JSON representation

Generate GitHub badges for your Umami analytics data

• Host: GitHub
• URL: https://github.com/bellmano/umami-github-badges
• Owner: bellmano
• License: mit
• Created: 2026-01-19T15:55:43.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2026-01-25T13:25:17.000Z (2 months ago)
• Last Synced: 2026-01-25T16:28:17.949Z (2 months ago)
• Topics: badge, badges, css, github-badge, github-badges, html, javascript, umami, umami-analytics, website
• Language: JavaScript
• Homepage: https://umami-github-badges.vercel.app
• Size: 339 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# :ramen: Umami GitHub Badges 

![Total Page Views](https://umami-github-badges.vercel.app/api/views?website=ca16f4b3-a794-4597-a7e9-abba6ee32112&token=api_O2dOgzOmyw1Y69y8HnngGdOtyoZ6N2Pi&range=all&style=for-the-badge&label=Total+Page+Views&cache=0&v=1)

![Average Session Duration on Website](https://umami-github-badges.vercel.app/api/avg-session?website=ca16f4b3-a794-4597-a7e9-abba6ee32112&token=api_O2dOgzOmyw1Y69y8HnngGdOtyoZ6N2Pi&range=all&style=for-the-badge&label=Average+Session+Duration+on+Website&cache=0&v=1)

![Unique Visitors](https://umami-github-badges.vercel.app/api/visitors?website=ca16f4b3-a794-4597-a7e9-abba6ee32112&token=api_O2dOgzOmyw1Y69y8HnngGdOtyoZ6N2Pi&range=all&style=for-the-badge&label=Unique+Visitors&cache=0&v=1)

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=coverage&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=security_rating&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=sqale_rating&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=reliability_rating&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=bugs&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=vulnerabilities&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=bellmano_umami-github-badges&metric=code_smells&token=6e9bb50bb14b2d851f65c161bef4a5e41dc5050c)](https://sonarcloud.io/summary/overall?id=bellmano_umami-github-badges)

Generate beautiful, dynamic GitHub badges for your Umami website analytics! Show off your website traffic, page views, and visitor stats directly in your README files.

## :rocket: Quick Start

### 1. Get Your Website ID and API Key

You'll need:

- Your Website ID (found in your website settings)

- An API key (Account Settings → API keys)

**:warning: Security Notice:** Your API key will be visible in the badge URL. This means anyone can view your website analytics data (views, visitors, etc.) but cannot modify settings or access other websites. Only use badges for public websites where you're comfortable sharing traffic statistics. You can rotate your API key anytime in Umami settings.

**Note:** This service is designed for **Umami Cloud** (https://cloud.umami.is) which uses the API endpoint `https://api.umami.is/v1`. If you're self-hosting Umami, you'll need to modify the code to point to your instance.

### 2. Generate Your Badge

**Option A: Use the Web Interface**

Visit: **[umami-github-badges.vercel.app](https://umami-github-badges.vercel.app/)**

**Option B: Create URL Manually**

```

https://umami-github-badges.vercel.app/api/{metric}?website={WEBSITE_ID}&token={API_TOKEN}&range=all&style=for-the-badge&cache=0&v=1

```

### 3. Add to Your README

```markdown

![Website Analytics](https://umami-github-badges.vercel.app/api/views?website=your-website-id&token=your-api-token&range=all&style=for-the-badge&cache=0&v=1)

```

## :bar_chart: Available Metrics

| Metric | Description | Example |

|--------|-------------|---------|

| `views` | Total page views | ![Views](https://img.shields.io/badge/Views-12.5K-brightgreen?style=for-the-badge) |

| `visitors` | Unique visitors | ![Visitors](https://img.shields.io/badge/Visitors-3.2K-green?style=for-the-badge) |

| `visits` | Total visits | ![Visits](https://img.shields.io/badge/Visits-8.9K-blue?style=for-the-badge) |

| `bounce-rate` | Bounce rate percentage | ![Bounce Rate](https://img.shields.io/badge/Bounce%20Rate-45.2%25-orange?style=for-the-badge) |

| `avg-session` | Average session duration | ![Avg Session](https://img.shields.io/badge/Avg%20Session-1m_36s-purple?style=for-the-badge) |

## :art: Customization Options

| Parameter | Description | Values |

|-----------|-------------|--------|

| `range` | Time range for stats | `7d`, `30d`, `90d`, `all` (default: `all`) |

| `style` | Badge style | `flat`, `flat-square`, `for-the-badge`, `plastic`, `social` |

| `color` | Badge color | `brightgreen`, `green`, `blue`, `red`, `orange`, `yellow`, `purple`, or hex codes |

| `label` | Custom label text | Any text (URL encoded) |

## :test_tube: Running Tests

To run the tests and view coverage:

1. Install the required dev dependency:

	```powershell

	npm install

	```

2. Run the test coverage script:

	```powershell

	npm run test:coverage

	```

This will execute the tests and generate a coverage report.

## :handshake: Contributing

Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.

## :mega: Issues or Suggestions

Any issues or suggestions, please [create an issue on Github](https://github.com/bellmano/umami-github-badges/issues).

## :coffee: Buy me a coffee

Donations are welcome to appreciate my work and to keep this project alive, but isn't required at all.