Put it on any site you own
One line of HTML, and nothing to install. Here is the exact place it goes in twelve setups. Find yours and paste.
Find your setup
Each of these is the exact file or menu path for that platform, plus the one thing that actually goes wrong on it:
The line
Everything below is a way of getting this onto a page. Swap yourname for your handle. It's the one in your dashboard.
<script src="https://maketaksh.com/badge.js" data-taksh="yourname" defer></script>It goes anywhere in the page. Before </body> is the convention, but defer means it can sit in the <head> and still not block rendering.
React, Next.js and anything with a build step
There is nothing to install. The line above is the whole product, and in almost every framework it goes in the one real HTML file the build still has: index.html for Vite and Create React App, src/app.html for SvelteKit, the layout template for Astro and the static generators. Outside the component tree means no double-mount on client-side navigation and nothing to tear down.
Next.js is the one exception, and it fails silently: React drops raw <script> elements during render, with no warning, no error and nothing in the Network tab. Use next/script.
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://maketaksh.com/badge.js"
data-taksh="yourname"
strategy="afterInteractive"
/>
</body>
</html>
);
}Nuxt owns its HTML too, so it gets the same treatment from the other direction: declare the script in your config and Nuxt writes it into every page.
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: "https://maketaksh.com/badge.js", "data-taksh": "yourname", defer: true },
],
},
},
});If your build generates the HTML and there is genuinely no file to edit, append the tag from your root component and remove it on unmount. The cleanup is not optional: React 18's StrictMode runs every effect twice in development, so without it you get two badges locally and one in production.
import { useEffect } from "react";
useEffect(() => {
const s = document.createElement("script");
s.src = "https://maketaksh.com/badge.js";
s.dataset.taksh = "yourname";
s.defer = true;
document.body.appendChild(s);
return () => {
s.remove();
document.querySelector("[data-taksh-badge]")?.remove();
};
}, []);Astro, Hugo, Jekyll, Eleventy
Static site generators all have one layout file that wraps every page. Paste the line into it once.
<slot />
<script src="https://maketaksh.com/badge.js" data-taksh="yourname" defer></script>
</body>Hugo: layouts/_default/baseof.html. Jekyll: _layouts/default.html. Eleventy: whatever your base layout is called. Same line, same place, just before the closing </body>.
WordPress
No plugin needed, and no theme file to edit if you don't want to. In the admin: Appearance → Customize → Additional CSS is the wrong place. CSS can't load a script. Use one of these instead:
Block themes (Twenty Twenty-Four and newer): Tools → Theme File Editor → footer.html, or add a Custom HTML block to the footer template.
Classic themes: drop this into your child theme's functions.php, which survives theme updates in a way editing footer.php does not.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('taksh-badge', 'https://maketaksh.com/badge.js', [], null, true);
});
add_filter('script_loader_tag', function ($tag, $handle) {
if ('taksh-badge' !== $handle) return $tag;
return str_replace(' src=', ' data-taksh="yourname" defer src=', $tag);
}, 10, 2);Webflow, Framer, Squarespace, Wix, Ghost
All of these have a "custom code" box that injects raw HTML into every page. Paste the line into the footer one, not the head one, though both work.
Webflow: Site settings → Custom code → Footer code. Publish afterwards; custom code does not appear in the Designer preview.
Framer: Site settings → General → Custom code → End of <body>.
Squarespace: Settings → Advanced → Code injection → Footer.
Wix: Settings → Custom code → Add code to all pages, Body - end.
Ghost: Settings → Code injection → Site footer.
<script src="https://maketaksh.com/badge.js" data-taksh="yourname" defer></script>Your GitHub profile README
GitHub strips every script from a README, so the badge goes there as an image instead: a small "Made by" pill, or add ?type=card for a card listing every app. It is drawn in your badge's colours, links to your maker hub, and updates when you edit your apps. The exact line, with your handle in it, is in the Install panel of your dashboard.
[](https://maketaksh.com/u/yourname)More on laying out a profile README around the things you've shipped, dark mode, and images that won't refresh: how to show your projects on your GitHub profile.
Checking it worked
Load the page and look at the bottom corner. If nothing appears, it is almost always one of four things, in order of how often:
The badge has nothing in it. Add at least one project on your dashboard; changes reach installed badges within five minutes.
The handle is wrong. Same silent outcome. Copy it from your dashboard rather than typing it.
A framework stripped the tag. See the Next.js note above; React strips inline script tags in JSX too.
A content blocker. Check the Network tab for badge.js.
Once it's live, your dashboard's Analytics panel lists every site the badge has been seen on, from the first page load, which is the fastest way to confirm an install is working on a site you can't easily open.
Turning off analytics
The badge counts how often it is shown, opened and clicked, on which of your hostnames and from which countries, so you can tell whether it is doing anything. It stores integers and nothing else: no cookies, no storage, no IP address, no visitor record. The full detail is on the privacy page.
If you'd rather a given site sent nothing at all:
<script src="https://maketaksh.com/badge.js" data-taksh="yourname" data-taksh-insights="off" defer></script>BroFindAI vote counts
If one of your apps is also listed on BroFindAI, tick This app is listed on BroFindAI beside it in your dashboard and paste its tool id. The badge and your hub then show that app's live vote count next to it.
This is the only thing that makes the badge read anything from a server that isn't ours, and it happens only for apps you have linked and only once a visitor opens the panel. Nothing about the visitor is sent, and if the count doesn't come back the badge draws the row without it. If you'd rather a particular site never made that request:
<script src="https://maketaksh.com/badge.js" data-taksh="yourname" data-taksh-votes="off" defer></script>