Badges

Add a badge to your website with the sessions of last month. It automatically adopts to dark mode or you can use your own colors. It only works for customers of Simple Analytics.

Enter your domain:

The badge will only show a counter for public websites

Preview

<a
            href="https://dashboard.simpleanalytics.com/example.com?utm_source=example.com&utm_content=badge"
            referrerpolicy="origin"
            target="_blank"><picture><source
            srcset="https://simpleanalyticsbadges.com/example.com?mode=dark"
            media="(prefers-color-scheme: dark)"
            /><img
            src="https://simpleanalyticsbadges.com/example.com?mode=light"
            loading="lazy"
            referrerpolicy="no-referrer"
            crossorigin="anonymous"
            /></picture></a>

Customization

We designed our badge in a way where you can define your own colors, border radius, and if you want to show the counter.

Show customization options

We automatically detect if your visitor uses dark mode. But you might want to force a specific mode. You can set it to either auto (default), light, or dark: https://simpleanalyticsbadges.com/simpleanalytics.com?mode=dark

You can add colors for these parameters: background, text, logo. You can use colors like:

#ff6600 (# can be omitted or should be encoded like %23)
orange
rgb(233, 21, 24)

This https://simpleanalyticsbadges.com/simpleanalytics.com?logo=orangered&text=rgba(255,69,0,.8)&background=151b1c would look like:

To hide the counter on the badge you can add counter=false to your image. The first image below has counter=true, the other one counter=false:

The last thing you can change is the corner radius of the image. To remove the whole radius you can use radius=0. To have a radius of 10px you would add radius=10:

Privacy

We care about your privacy and that of your visitors. It's in our DNA. We don't want to collect any data with these badges. In the embed code your see several additional attributes. These are there to protect your privacy.

Read technical details

In the image tag we include referrerpolicy="no-referrer" (explained on MDN) to not send any referrer data to our image server (this could potentially become a CDN) and crossorigin="anonymous" (MDN) to never send any cookies our way. We don't load the image when a user doesn't scroll that far with loading="lazy" (MDN). This saves recourses and prevents consistent tracking.

We also want to prevent getting the full link in the referrer so we did add referrerpolicy="origin" to the link. This only sends the hostname (origin) of your website as a referrer. We added utm_source with your hostname and utm_content=badge so we can measure the amount of session we get through your badge. Feel free to remove those values.

Note on CSP
If you use CSP for your website, make sure to add simpleanalyticsbadges.com to it: Content-Security-Policy: default-src 'self'; img-src simpleanalyticsbadges.com;.