How to add a "Made by" badge to React, Vue & Vite

Single-page apps built with Vite, Create React App, Vue or Svelte have one index.html, which is the only place the badge needs to go.

No badge yet? Create one in about a minute. It's free and needs no account.

Create your badge

Steps

  1. 1

    Create your badge in the Maker Badge editor and copy your code.

  2. 2

    Open index.html at the root of your project (public/index.html in Create React App).

  3. 3

    Paste the code just before the closing </body> tag.

  4. 4

    Build and deploy as usual.

What the code looks like

An updatable badge is a single line like this (the editor gives you yours). The self-contained version is longer but works the same way.

<script src="https://madebybadge.netlify.app/v1/badge.js" data-badge="YOUR_BADGE_ID" async></script>

Good to know

  • The badge is plain JavaScript, so there is nothing to install and it works with any framework.

Using an AI coding agent?

Copy these instructions into Claude Code, Cursor or Copilot and paste your snippet where it asks. The editor's "Copy prompt for your AI agent" button includes your snippet already.

Not showing up?

  • Check the published site, not an editor preview: most builders only run custom code on the live site.
  • Make sure the whole snippet was pasted, including the closing </script> tag.
  • Use "Test page" in the Maker Badge code dialog to confirm the badge itself works.

Other platforms