How to add a "Made by" badge to HTML

Any hand-written or static site (including GitHub Pages, Netlify, Vercel and Cloudflare Pages) can show the badge by adding one line of HTML.

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 go to the last step, Share.

  2. 2

    Open the HTML file of your page (for example index.html).

  3. 3

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

  4. 4

    If your site uses a shared layout or template (Jekyll _layouts, Hugo baseof.html, an Astro or Eleventy layout), paste it there once to show the badge on every page.

  5. 5

    Deploy or upload the file 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 loads after your page, so it never slows down your content.
  • It lives in its own shadow root: your CSS won't break it and its CSS won't touch your site.

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