React

Add the badge to React

A plain React app has one advantage over a framework: it still has a real index.html, and that is the correct place for a third-party script. Put it there and you are done. If your build has no HTML file to edit, use the mount function instead. It returns its own teardown, so it survives StrictMode's double-invoke in development. This is also the answer for Vite, Create React App, React Router.

Where the code goes

First choice: index.html. Vite keeps it at the project root, Create React App at public/index.html. The script sits before </body>, outside React entirely, and never re-runs on a re-render. This is the version with the fewest ways to go wrong.

Second choice: append it from an effect. If the HTML file is generated and you cannot edit it, add the tag from your root component and clean it up on unmount. In React 18 StrictMode every effect runs twice in development, so without that cleanup you get two badges stacked in the corner.

The code

index.html

  <div id="root"></div>
  <script src="https://maketaksh.com/badge.js" data-taksh="yourname" defer></script>
</body>

src/App.tsx (if you can't edit the HTML)

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();
  };
}, []);

Swap yourname for your handle. It is the one in your dashboard.

Two badges in development, one in production

StrictMode mounts, unmounts and remounts every component in development to surface exactly this class of bug. If your effect does not clean up after itself, you get a duplicate badge locally and a correct one in production, which is the confusing way round. Removing both the script and the badge's own element is the whole fix.

Checking it worked

Load the published page and look at the bottom corner. If nothing is there, it is almost always one of four things, in order of how often: the handle has no projects in it yet; the handle is wrong; the platform stripped the tag, as described above; or a content blocker ate it, check the Network tab for badge.js.

Once it is live, the Analytics panel in your dashboard lists every site the badge has been seen on, from the first page load, which is the fastest way to confirm an install on a site you cannot easily open.

Other setups

Next.js · Svelte, Vue and Nuxt · All twelve setups

What the badge is, and why cross-linking your own launches is worth doing at all: the short version.