> ## Documentation Index
> Fetch the complete documentation index at: https://docs.minimo.it/llms.txt
> Use this file to discover all available pages before exploring further.

# First widget in 15 minutes

> Show a restaurant its automatic messages inside your app: settings once, a session from your backend, one iframe in your page

## What you build

A page in your app where a restaurant (a **tenant**) sees and personalizes the emails its guests get, then a first email sent for that restaurant. You need a backend that can make an HTTPS call and a page you control.

**1. Have a key and a template**

* A Minimo API key with the `widgets` and `transactional` permissions (see [API keys and permissions](https://docs.minimo.it/guides/embedded-overview.md#api-keys-and-permissions)). It stays on your server.
* At least one email template in your workspace, for example "Booking confirmation", with merge fields such as `{GUEST_NAME}` and `{BOOKING_TIME}`. Set its category to **utility** (a confirmation is a service email, not marketing).
* Its two ids: the **numeric id** (e.g. `891`) for the widget settings, and the **uid** (7 characters, e.g. `TRF4MS9`, the `id` that `GET /public/v1/templates/email` returns) for sending. Minimo gives you both for the templates it prepares with you.

**2. Tell Minimo where the widgets live (once)**

```bash theme={null}
curl -X PUT https://api.minimo.it/public/v1/widgets/settings \
  -H "Authorization: Bearer YOUR_MINIMO_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "allowedOrigins": ["https://app.yoursaas.example", "http://localhost:3000"],
    "masterTemplateIds": [891]
  }'
```

```json theme={null}
{ "data": { "allowedOrigins": ["https://app.yoursaas.example", "http://localhost:3000"], "masterTemplateIds": [891] } }
```

`allowedOrigins` are the pages allowed to show the widgets. `masterTemplateIds` are the templates every restaurant sees. `GET` on the same path reads them back.

**3. Mint a session from your backend**

When a restaurant opens the page, your backend asks Minimo for a session for that restaurant and gives only the URLs to the browser.

```js server/minimo-widgets.js theme={null}
export async function createWidgetSession(restaurant) {
  const res = await fetch('https://api.minimo.it/public/v1/widgets/sessions', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.MINIMO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      tenant: restaurant.id, // your id, e.g. "restaurant_4812"
      tenantName: restaurant.name, // shown in the widgets
      locale: 'it', // 'en' or 'it'
    }),
  });
  if (!res.ok) throw new Error(`Minimo session failed: ${res.status}`);
  const { data } = await res.json();
  return data.urls; // { templates, campaigns, history, brand, whatsapp, stats }
}
```

Expose it to your page with your usual auth, for example `GET /api/minimo/widgets` that returns `createWidgetSession(currentRestaurant)`.

**4. Embed the widget in your page**

```html theme={null}
<div id="minimo-templates"></div>
<script src="https://api.minimo.it/public/v1/embed/widgets/widgets.js"></script>
<script>
  fetch('/api/minimo/widgets')
    .then((r) => r.json())
    .then((urls) => {
      Minimo.mountWidget({
        url: urls.templates,
        container: '#minimo-templates',
        minHeight: 760,
        onEvent: (event) => console.log(event.widget, event.type, event.data),
      });
    });
</script>
```

The restaurant now sees its automatic messages, can preview them and press **Personalize** to edit its own copy in the Minimo editor. Your console logs `templates ready`.

**5. Send the first email for the restaurant**

Send the **master** template (its uid) with the restaurant as `tenant`. If the restaurant personalized it, Minimo uses its copy.

```bash theme={null}
curl -X POST https://api.minimo.it/public/v1/transactionals \
  -H "Authorization: Bearer YOUR_MINIMO_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "transactional": "TRF4MS9",
    "recipient": "guest@example.com",
    "tenant": "restaurant_4812",
    "customFields": { "GUEST_NAME": "Anna", "BOOKING_TIME": "20:30" }
  }'
```

Mount `urls.history` (or `urls.stats`) the same way to see the send from the restaurant's side.

> [!TIP]
>
> Mint a new session every time the page opens (sessions last 60 minutes by default, up to 720). Never cache the URLs in
> the browser or share them between restaurants: each one carries a token for one restaurant only.

## Next steps

* Show the other widgets: [campaigns](https://docs.minimo.it/guides/embedded-widget-campaigns.md), [history](https://docs.minimo.it/guides/embedded-widget-history.md), [statistics](https://docs.minimo.it/guides/embedded-widget-statistics.md), [brand](https://docs.minimo.it/guides/embedded-widget-brand.md).
* Stop sending emails yourself: send booking events and let Minimo time them, see [Automatic messages](https://docs.minimo.it/guides/embedded-automations.md).
* Send from each restaurant's domain: [Embedded domain connect](https://docs.minimo.it/guides/embedded-domain-connect.md) and [Senders](https://docs.minimo.it/guides/embedded-senders-and-sending.md).
* Before real restaurants: [Go-live checklist](https://docs.minimo.it/guides/embedded-go-live.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.