Maker Badge for AI agents

Maker Badge adds a small floating "Made by" badge to any website. A click opens the maker's projects, links, socials and a signup form. This page tells AI agents how to create a badge for a user and add it to their site. No account or API key is needed.

This page as Markdown llms.txt

Using an AI assistant yourself? Add the MCP server below and ask it for a badge. No MCP? Tell your agent: "Add a Maker Badge to my site, following madebybadge.netlify.app/agents.md". Or design your badge in the editor and use "Copy prompt for your AI agent" under your code.

MCP server

The easiest way: add Maker Badge as an MCP server (connector). Then just ask, for example "Make me a Maker Badge for ada.dev, dark and minimal, with my newsletter". The URL is madebybadge.netlify.app/mcp (Streamable HTTP, no sign-in).

  • Claude (web and desktop): Settings → Connectors → Add custom connector, and paste the URL.
  • Claude Code: claude mcp add --transport http maker-badge https://madebybadge.netlify.app/mcp
  • Cursor: add "maker-badge": { "url": "https://madebybadge.netlify.app/mcp" } under "mcpServers" in .cursor/mcp.json (or Settings → MCP).
  • ChatGPT: in developer mode, add a connector with the URL.
  • Any other MCP client: add a remote (HTTP) server with the URL.
  • read_website: the owner's name, role and photo, description, logo, brand color, fonts and profiles from the maker's site, plus a suggestedSetup.
  • create_badge: publish a badge; returns a preview link, the snippet and the private edit link.
  • update_badge: change only what's mentioned ("make it purple").
  • get_badge: see a badge's current content and style.
  • get_stats: views (estimated), opens and clicks of the last 30 days, per day and per link.
  • editor_link: open the editor pre-filled, without storing anything.
  • install_instructions: steps for a website builder, or instructions for a coding agent.

Quick start (HTTP API)

  1. Check the site's code for an existing badge (a script with data-badge="…"). If there is one, update that badge instead of creating a new one.
  2. Create the badge with one API call (below), using the user's real name, tagline and links. Ask the user for anything you don't know; never invent links. If you can't make web requests, ask the user to create the badge at madebybadge.netlify.app/create and paste you the code from the Share step.
  3. Add the returned snippet once, right before </body> in the layout every page uses.
  4. To show the profile as part of a page instead (a links or about page), use the same script with data-show="page" at the spot where it should appear. It renders right where the script is, or in an empty <div data-maker-badge-profile></div> if the page has one.
  5. Give the user the returned editUrl. It opens the badge in the visual editor, where they can change anything later. Treat it like a password: don't commit it, log it or put it on the site.

Create a badge

curl -X POST https://madebybadge.netlify.app/api/badges \
  -H 'Content-Type: application/json' \
  -d '{"setup":{"name":"Ada Lovelace","tagline":"Building calm software","links":[{"title":"Calm","url":"https://calm.dev","description":"A quiet todo app"}],"socials":["https://x.com/ada","https://github.com/ada"],"theme":"modern-white"}}'

Response (201):

{
  "id": "k3m9x2p7qa",
  "key": "(secret edit key)",
  "updatedAt": "2026-01-01T12:00:00.000Z",
  "snippet": "<!-- Maker Badge · updates automatically -->\n<script src=\"https://madebybadge.netlify.app/v1/badge.js\" data-badge=\"k3m9x2p7qa\" async></script>",
  "editUrl": "https://madebybadge.netlify.app/create#e=k3m9x2p7qa.(secret edit key)"
}

Setup fields

  • name (required): the maker's full name. The badge reads "Made by" and their first name.
  • template: maker (projects, revenue and socials; the default), creator (links, socials, newsletter), freelancer (work, get hired) or link (a badge that only links to url).
  • tagline: one short line about them.
  • url: their main link. Required for the link template.
  • links: up to 10 { "title", "url", "description" } shown in the popup.
  • socials: up to 10 profile URLs. Icons are detected from the URL (X, GitHub, LinkedIn, YouTube, Instagram and more).
  • embeds: up to 5 { "title", "url" }, each its own section in the popup. Links from YouTube, Vimeo, Loom, Spotify, Calendly, Cal.com, Tally, Typeform, Google Forms and Figma show as players; other pages are shown in a frame.
  • photo: https URL of a square photo.
  • description: a short bio for the popup.
  • theme: default, modern-white, flat-white, flat-dark, notion-bold, editorial, neumorphism-light, neumorphism-dark.
  • position: bottom-right (default), bottom-left, bottom-center, top-right, top-left, top-center, center-right, center-left or center.
  • size: tiny, small, medium (default) or large.
  • sideways: true turns the badge along the edge, like a tab. Only for center-left and center-right.
  • mobileCustom: phones get their own settings, from the mobile* fields below. Sending any of them turns this on; false makes phones look like computers again.
  • mobileSize: size on phones (screens up to 640px): same, smaller (one step smaller, the default once phones get their own settings), tiny, small, medium or large.
  • mobilePosition: where it sits on phones: same (default) or any position value.
  • flush: true puts the badge flush in the corner or against the edge, with no gap.
  • mobileFlush, mobileSideways: the same on phones only. Leave them out to follow flush and sideways.
  • showOnMobile: false hides the badge on phones.
  • mobilePhoto: the photo in the badge on phones, true or false, independent of computers.
  • mobileSubheading: false leaves the subheading out of the badge on phones.
  • color: brand color as hex (#7c3aed), used for the badge and buttons.
  • corners: square, soft, round.
  • font: a Google Fonts family ("DM Sans") or "system-ui" (fastest).

Start from a website

GET https://madebybadge.netlify.app/api/site-info?url=ada.dev returns what the site says about its maker: name, title, description, logo (square, good as photo), image, color (from theme-color), fonts and socials. Use it to fill the setup fields, and check the name and tagline with the user.

Without storing anything

To let the user finish the badge themselves, link to the editor with the setup fields in the URL: https://madebybadge.netlify.app/create#setup= followed by the URL-encoded JSON, e.g. https://madebybadge.netlify.app/create#setup=%7B%22name%22%3A%22Ada%20Lovelace%22%2C%22theme%22%3A%22flat-dark%22%7D. Nothing is stored until they publish.

Invalid input returns 400 with { "error": "…" } saying exactly what to fix. Badges that break the Terms (e.g. links to adult, phishing or malware sites) are refused with 422 and the reason.

Change a badge

  • Change it: PUT /api/badges/{id} with the header Authorization: Bearer {key} and a { "setup": … } body with only the fields that change. If you only have the editUrl, the key is the part after #e={id}.
  • The site picks up changes within about a minute. The snippet stays the same.
  • Read the current badge: GET /api/badges/{id} (public).
  • Stats: POST /api/badges/{id}/stats with the same Authorization header returns views (estimated from 1 in 10 visits), opens and clicks per day for the last 30 days, and the most-clicked links.
  • Colors, fonts, email signup forms and section order are easiest in the visual editor: send the user to their editUrl.
curl -X PUT https://madebybadge.netlify.app/api/badges/k3m9x2p7qa \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer (secret edit key)' \
  -d '{"setup":{"color":"#7c3aed","tagline":"Now building Calm 2.0"}}'

Add it to a codebase

The badge is plain JavaScript with no package to install. It renders itself in a shadow root, so it can't clash with the site's styles or framework. These are the instructions makers give their coding agent:

Add my Maker Badge (a small floating "Made by" badge) to this website.

## The snippet
Use my badge's snippet: the `snippet` from the API response if you created the badge (https://madebybadge.netlify.app/agents.md), otherwise ask me to copy it from the Share step at https://madebybadge.netlify.app/create. It looks like this:

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

## Where it goes
Add it ONCE, in the layout or template that every page uses, right before the closing </body> tag. Pick the first that matches this project:
- Next.js (App Router): app/layout.tsx, inside <body> after {children}, using next/script with strategy="afterInteractive" (keep the src and data-badge attributes).
- Next.js (Pages Router): pages/_document.tsx, before </body>, or next/script in pages/_app.tsx.
- Vite, Create React App, Vue, Svelte, Solid or another single-page app: index.html (public/index.html in Create React App), before </body>.
- Astro, Nuxt, SvelteKit, Remix, Gatsby, Eleventy, Hugo, Jekyll: the base layout or root template (e.g. src/layouts/Layout.astro, app.vue/nuxt.config head, src/app.html, app/root.tsx, layouts/_default/baseof.html, _layouts/default.html).
- Plain HTML: every page's HTML file, before </body>.
- If this site is made with a website builder and has no code for this in the repo, don't guess. Tell me, and link the matching guide:
  - Webflow: https://madebybadge.netlify.app/guides/webflow
  - Framer: https://madebybadge.netlify.app/guides/framer
  - WordPress: https://madebybadge.netlify.app/guides/wordpress
  - Squarespace: https://madebybadge.netlify.app/guides/squarespace
  - Wix: https://madebybadge.netlify.app/guides/wix
  - Shopify: https://madebybadge.netlify.app/guides/shopify
  - Ghost: https://madebybadge.netlify.app/guides/ghost
  - Carrd: https://madebybadge.netlify.app/guides/carrd

## Rules
- Don't install any npm package: there is none. The badge is plain JavaScript that renders itself outside the app, in a shadow root.
- Don't put it in <head>, inside a component that re-renders, or on only one page.
- Don't add it twice. If a Maker Badge snippet is already there, replace it with this one.
- If the site sets a Content-Security-Policy, allow `https://madebybadge.netlify.app` in script-src and connect-src, plus the photo's domain in img-src (or `data:` if the photo was uploaded, which embeds it in the badge) and fonts.googleapis.com/fonts.gstatic.com if the badge uses a Google font.

## Check it worked
Run the site and open any page. A badge appears in the corner, and in the browser console `document.getElementById('maker-badge')` returns an element and `window.MakerBadge` is defined. There should be no new console errors.

Then tell me which file you changed.

(Docs for agents: https://madebybadge.netlify.app/agents.md)

Website builders

Sites made with a builder get the snippet in their settings, not in code. Step-by-step guides (also as Markdown):

Limits

  • Free, with no account and no API key. Writes are limited to 30 requests per minute.
  • Badges created through the API can't run custom scripts on the site. Embedded third-party forms need the self-contained code from the editor.
  • The badge needs a site that allows custom code. Notion pages, Linktree and social profiles can't show it.