# Embed Widgets

Embed your items, projects, and tip button on any external website. Each embed is a self-contained HTML page in an `<iframe>` -- no external JavaScript, no tracking, no dependencies on your end.

## Available Embeds

### Item Button

A compact purchase button showing the item title, price, and cover image.

```html
<iframe src="https://makenot.work/embed/i/ITEM_ID/button"
        width="300" height="80"
        frameborder="0"></iframe>
```

### Item Card

A richer card with cover image, title, creator name, description excerpt, and purchase button.

> [!UI] embed-item-card

Available in two layouts:

**Vertical** (default, 350px wide):
```html
<iframe src="https://makenot.work/embed/i/ITEM_ID/card"
        width="350" height="400"
        frameborder="0"></iframe>
```

**Horizontal** (600px wide, image on left):
```html
<iframe src="https://makenot.work/embed/i/ITEM_ID/card?layout=horizontal"
        width="600" height="200"
        frameborder="0"></iframe>
```

### Audio Player

A playable audio preview with cover art, title, play/pause controls, and progress bar. Audio items only.

```html
<iframe src="https://makenot.work/embed/i/ITEM_ID/player"
        width="400" height="120"
        frameborder="0"></iframe>
```

### Project Card

A card showing the project cover, title, creator name, item count, category, and description excerpt.

```html
<iframe src="https://makenot.work/embed/p/PROJECT_SLUG/card"
        width="350" height="400"
        frameborder="0"></iframe>
```

### Tip Button

A button with the creator's avatar and a "Support @username" label.

```html
<iframe src="https://makenot.work/embed/u/USERNAME/tip"
        width="300" height="80"
        frameborder="0"></iframe>
```

## Finding the Embed Code

From the item dashboard, open the **Embed** tab for copy-paste-ready embed codes.

## How Embeds Work

Each embed is a complete HTML document with inline CSS and JavaScript. No external scripts, no cookies, no tracking. Embeds are cached for 5 minutes.

All embeds set permissive framing headers (`X-Frame-Options: ALLOWALL`, `Content-Security-Policy: frame-ancestors *`) so they work on any domain.

## What's Shown

Embeds only display public items from active accounts. All text is HTML-escaped.

## See Also

- [Content & Items](./02-content.md): Publishing items
- [Selling & Pricing](./03-selling.md): Purchase flows
- [Tips](./tips.md): Tipping creators