# 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.

## 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 https://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 https://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

```sh
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):

```json
{
  "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`.

```sh
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:

````md
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):

- HTML: https://madebybadge.netlify.app/guides/html.md
- Webflow: https://madebybadge.netlify.app/guides/webflow.md
- Framer: https://madebybadge.netlify.app/guides/framer.md
- WordPress: https://madebybadge.netlify.app/guides/wordpress.md
- Squarespace: https://madebybadge.netlify.app/guides/squarespace.md
- Wix: https://madebybadge.netlify.app/guides/wix.md
- Shopify: https://madebybadge.netlify.app/guides/shopify.md
- Ghost: https://madebybadge.netlify.app/guides/ghost.md
- Carrd: https://madebybadge.netlify.app/guides/carrd.md
- Next.js: https://madebybadge.netlify.app/guides/nextjs.md
- React, Vue & Vite: https://madebybadge.netlify.app/guides/react.md

## 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.