Skip to content

asrvd/visitor-counter-badge

Repository files navigation

Visitor Counter Badge

Visitor counter badge is a simple API which serves badge from shields.io. You can use this badge to count visitors for your GitHub Repositories or even your personal sites. The usage is very simple.

Usage

You need a key and a value to create a unique query combination which will eventually be used to count visitors. So considering you want to use the badge for your repository, user/repo-name can be a good unique query. For example https://visitor-counter-badge.vercel.app/api/username/repo-name/ will return a badge where username is your github username and repo-name is your repository name.

Default Badge

Badge

![Badge](https://visitor-counter-badge.vercel.app/api/asheeeshh/visitor-counter-badge/)

Badge with custom label and color

Badge

![Badge](https://visitor-counter-badge.vercel.app/api/asheeeshh/visitor-counter-badge?label=Hits&color=fc7695&labelColor=95abdb)

Custom Styling

You can customize the badge by passing the following parameters:

Parameter Description Default
style style of badge for-the-badge
label label name Visitors
color color for right side of badge 5c5866
labelColor color for left side of badge 2b2930

For avaialble styles and color types, please refer to shields.io site.

Running Locally

Clone the repository

git clone https://github.com/asheeeshh/visitor-counter-badge.git

Install dependencies

cd visitor-counter-badge
npm install

Run the app

npm run dev

One Click Deploy

You can deploy this app to any of the below platforms in one click.

Platform Button
Vercel Deploy with Vercel
Netlify Deploy to Netlify
Cloudflare Workers Deploy to Cloudflare Workers

A note on usage

The API depends upon countapi for counting visitors. Though it's kind of impossible, still if you get ratelimited by the API you can just host your own instance of this API using Vercel and get unlimited personal requests!

Deploy with Vercel

License

MIT

Ending Note

  • If you find this project helpful, consider giving it a ⭐.
  • Checkout my other projects too 💜.