# SME Explainer — IG Carousel

> Square educational SME carousel — clean light style, circled keyword, swipe chrome.

This is a [Bannx](https://bannx.com) template. Render any of its **pages** to an image (PNG, SVG, WebP) or PDF through the Bannx Render API, and customize the output by passing **tweaks** (variable overrides).

## Template

- Template ID: `instagram-carousel`
- Category: social-media
- Pages: 6
- Open in browser: https://bannx.com/templates/instagram-carousel

## How to use

1. Pick a **page** below and note its **page ID**.
2. Call the Render API with that page ID. Override text, colors, and other values via the `tweaks` map (keys are the variable names listed below).
3. Authenticate with an API key (create one under **Settings → Space → Developers**) using the `Authorization: Bearer <token>` header. GET requests for this template require a token (or the space GET render secret `gt`).

Full docs: https://bannx.com/docs/rendering · https://bannx.com/docs/variables

## Quick demo (no API key)

AI agents and curious humans can render this **public** template with tweaks without an account. Mint a short-lived **demo token** (IP-throttled, ~1h TTL, max 5 per hour per IP) and pass it as `?demo=...` (or `Authorization: Bearer <token>`):

```bash
# 1. Mint a demo token (no auth required)
curl -s -X POST https://bannx.com/api/demo-token
# → { "token": "demo_…", "expiresAt": …, "quota": { … } }

# 2. Render with the token (public templates only)
curl -L "https://bannx.com/api/render/6a302ca182f3258e294cc1bb?format=png&output=binary&demo=demo_…" --output demo.png
```

Demo tokens only work on public templates and don't consume any space's credits. For production usage, create an API key under **Settings → Space → Developers** instead.

## Variables

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `brandA` | string | `BRIGHT` |  |
| `brandB` | string | `PATH` |  |
| `handle` | string | `@brightpath.co` |  |
| `series` | string | `SME SERIES` |  |
| `logo` | string | `data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%2272%22%20viewBox%3D%220%200%20320%2072%22%3E%3Crect%20width%3D%22320%22%20height%3D%2272%22%20fill%3D%22none%22%2F%3E%3Ctext%20x%3D%220%22%20y%3D%2252%22%20font-family%3D%22Montserrat%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2244%22%20font-weight%3D%22900%22%20letter-spacing%3D%221%22%3E%3Ctspan%20fill%3D%22%23FFFFFF%22%3EBRIGHT%3C%2Ftspan%3E%3Ctspan%20fill%3D%22%23C9F24E%22%3EPATH%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E` |  |

## Pages

### 01 Intro

- Page ID: `6a302ca182f3258e294cc1bb`
- Size: 1080×1080
- Variables: `slide`

### 02 Definition

- Page ID: `6a302ca182f3258e294cc1bc`
- Size: 1080×1080
- Variables: `slide`

### 03 Impact

- Page ID: `6a302ca182f3258e294cc1bd`
- Size: 1080×1080
- Variables: `slide`

### 04 Challenges

- Page ID: `6a302ca182f3258e294cc1be`
- Size: 1080×1080
- Variables: `slide`

### 05 How They Win

- Page ID: `6a302ca182f3258e294cc1bf`
- Size: 1080×1080
- Variables: `slide`

### 06 Closing

- Page ID: `6a302ca182f3258e294cc1c0`
- Size: 1080×1080
- Variables: `slide`

## Example: render "01 Intro"

POST (recommended):

```bash
curl -X POST "https://bannx.com/api/render" -H "Content-Type: application/json" -H "Authorization: Bearer YOUR_API_KEY" --data "{\"templateId\":\"instagram-carousel\",\"draft\":false,\"format\":\"png\",\"output\":\"binary\",\"tweaks\":{\"brandA\":\"BRIGHT\",\"brandB\":\"PATH\",\"handle\":\"@brightpath.co\"},\"pageId\":\"6a302ca182f3258e294cc1bb\"}" -o render.png
```

GET (embed in an `<img>` / quick link):

```bash
curl -H "Authorization: Bearer YOUR_API_KEY" "https://bannx.com/api/render/6a302ca182f3258e294cc1bb?format=png&output=binary&templateId=instagram-carousel&tweaks=%7B%22brandA%22%3A%22BRIGHT%22%2C%22brandB%22%3A%22PATH%22%2C%22handle%22%3A%22%40brightpath.co%22%7D" -o render.png
```