| 1 |
# Embed Widgets |
| 2 |
|
| 3 |
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. |
| 4 |
|
| 5 |
## Available Embeds |
| 6 |
|
| 7 |
### Item Button |
| 8 |
|
| 9 |
A compact purchase button showing the item title, price, and cover image. |
| 10 |
|
| 11 |
```html |
| 12 |
<iframe src="https://makenot.work/embed/i/ITEM_ID/button" |
| 13 |
width="300" height="80" |
| 14 |
frameborder="0"></iframe> |
| 15 |
``` |
| 16 |
|
| 17 |
### Item Card |
| 18 |
|
| 19 |
A richer card with cover image, title, creator name, description excerpt, and purchase button. |
| 20 |
|
| 21 |
> [!UI] embed-item-card |
| 22 |
|
| 23 |
Available in two layouts: |
| 24 |
|
| 25 |
**Vertical** (default, 350px wide): |
| 26 |
```html |
| 27 |
<iframe src="https://makenot.work/embed/i/ITEM_ID/card" |
| 28 |
width="350" height="400" |
| 29 |
frameborder="0"></iframe> |
| 30 |
``` |
| 31 |
|
| 32 |
**Horizontal** (600px wide, image on left): |
| 33 |
```html |
| 34 |
<iframe src="https://makenot.work/embed/i/ITEM_ID/card?layout=horizontal" |
| 35 |
width="600" height="200" |
| 36 |
frameborder="0"></iframe> |
| 37 |
``` |
| 38 |
|
| 39 |
### Audio Player |
| 40 |
|
| 41 |
A playable audio preview with cover art, title, play/pause controls, and progress bar. Audio items only. |
| 42 |
|
| 43 |
```html |
| 44 |
<iframe src="https://makenot.work/embed/i/ITEM_ID/player" |
| 45 |
width="400" height="120" |
| 46 |
frameborder="0"></iframe> |
| 47 |
``` |
| 48 |
|
| 49 |
### Project Card |
| 50 |
|
| 51 |
A card showing the project cover, title, creator name, item count, category, and description excerpt. |
| 52 |
|
| 53 |
```html |
| 54 |
<iframe src="https://makenot.work/embed/p/PROJECT_SLUG/card" |
| 55 |
width="350" height="400" |
| 56 |
frameborder="0"></iframe> |
| 57 |
``` |
| 58 |
|
| 59 |
### Tip Button |
| 60 |
|
| 61 |
A button with the creator's avatar and a "Support @username" label. |
| 62 |
|
| 63 |
```html |
| 64 |
<iframe src="https://makenot.work/embed/u/USERNAME/tip" |
| 65 |
width="300" height="80" |
| 66 |
frameborder="0"></iframe> |
| 67 |
``` |
| 68 |
|
| 69 |
## Finding the Embed Code |
| 70 |
|
| 71 |
From the item dashboard, open the **Embed** tab for copy-paste-ready embed codes. |
| 72 |
|
| 73 |
## How Embeds Work |
| 74 |
|
| 75 |
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. |
| 76 |
|
| 77 |
All embeds set permissive framing headers (`X-Frame-Options: ALLOWALL`, `Content-Security-Policy: frame-ancestors *`) so they work on any domain. |
| 78 |
|
| 79 |
## What's Shown |
| 80 |
|
| 81 |
Embeds only display public items from active accounts. All text is HTML-escaped. |
| 82 |
|
| 83 |
## See Also |
| 84 |
|
| 85 |
- [Content & Items](./02-content.md): Publishing items |
| 86 |
- [Selling & Pricing](./03-selling.md): Purchase flows |
| 87 |
- [Tips](./tips.md): Tipping creators |
| 88 |
|