# Task: Add DineSpot table reservations to this website

You are implementing online table reservations on a restaurant's website using **DineSpot**, the restaurant's reservation system. DineSpot hosts the booking form; your job is only to link to it or embed it. Do not build a booking form, call any DineSpot API, or store reservation data - DineSpot handles availability, confirmation emails/SMS and card guarantees.

## Restaurant details

- **Booking hash:** `RESTAURANT_HASH`
- **Hosted booking page:** `https://dinespot.si/book/RESTAURANT_HASH`
- **Preferred language:** `LANG` (supported: `en`, `si`, `hr`, `de`, `it`, `fr`, `es`, `pt`, `nl`, `pl`, `cz`, `sk`, `hu`, `ro` - `sl` and `cs` are accepted aliases)

If the hash above still reads `RESTAURANT_HASH`, ask the site owner for their booking link. They find it in the DineSpot dashboard under **Settings → Online booking → Your booking page**; the hash is the last part of that URL.

## Choose the approach

Ask the site owner which they want if it isn't clear. Otherwise use **both**: embed the form on a dedicated reservations page (or section), and point every other "Book a table" button at that page.

### Option A - Link to the hosted booking page

Simplest and works on every platform. Add a clearly visible "Book a table" call to action (header/navigation, hero, footer, contact page) that links to:

```
https://dinespot.si/book/RESTAURANT_HASH?lang=LANG
```

```html
<a href="https://dinespot.si/book/RESTAURANT_HASH?lang=LANG" target="_blank" rel="noopener">Book a table</a>
```

- Style it as the site's primary button.
- `?lang=` is optional; omit it to let guests pick their language. On multilingual sites, set it to the language of the current page.
- Opening in a new tab is recommended so guests don't lose the restaurant's site.

### Option B - Embed the booking form on the page

Place this where the form should appear (typically a "Reservations" page or a section with `id="reservations"`):

```html
<div data-dinespot="RESTAURANT_HASH" data-lang="LANG"></div>
<script src="https://dinespot.si/embed.js" async></script>
```

What the script does: it replaces the `div` with an iframe that shows only the booking form card (dark theme, rounded corners, transparent around it), centers it, caps it at 600px wide, and resizes its height automatically as the guest moves through the steps. No styling of the iframe is required.

Optional attributes on the `div`:

| Attribute        | Default        | Purpose                                            |
| ---------------- | -------------- | -------------------------------------------------- |
| `data-lang`      | `si`           | Form language (see list above).                    |
| `data-max-width` | `600px`        | Maximum form width; it always fills its container. |
| `data-title`     | `Book a table` | Accessible title of the iframe.                    |

Rules:

- Load `embed.js` **once per page**, even with several widgets. Load it from `https://dinespot.si/embed.js` - do not copy it into the project.
- In single-page apps (React, Vue, Next.js, Nuxt, Svelte…), render the `div`, load the script once (e.g. in the document head or a root layout), and call `window.DineSpot.mount()` after client-side navigation renders a new widget. Render the widget only on the client.
- Give the container enough horizontal room (ideally ≥ 360px on mobile, full width of the content column). Do not set a fixed height or `overflow: hidden` on the container.
- If the site has a Content-Security-Policy, add `https://dinespot.si` to `script-src` and `frame-src`.

#### Fallback: plain iframe (only if scripts can't be added)

The iframe can't resize itself without the script, so give it a height that fits the longest step:

```html
<iframe
  src="https://dinespot.si/book/RESTAURANT_HASH?embed=1&lang=LANG"
  title="Book a table"
  allow="payment"
  style="width: 100%; max-width: 600px; height: 900px; border: 0; display: block; margin: 0 auto; color-scheme: dark;"
></iframe>
```

Keep `allow="payment"` (needed for the optional card guarantee step) and `color-scheme: dark` (keeps the area around the card transparent).

### Optional - Track completed bookings

The widget dispatches bubbling DOM events on its container. Wire them to the site's existing analytics only if analytics is already set up:

```js
document.addEventListener("dinespot:booked", () => {
  // e.g. gtag("event", "reservation_completed");
});
document.addEventListener("dinespot:step", (e) => {
  // e.detail.step: 1 = date & time, 2 = guest details, 4 = card guarantee, 3 = done
});
```

No guest personal data is exposed to the website.

## Platform notes

- **WordPress:** add a _Custom HTML_ block with the embed snippet (or a _Buttons_ block with the link for Option A).
- **Webflow:** add an _Embed_ element with the snippet.
- **Squarespace:** add a _Code_ block with the snippet.
- **Wix:** add _Embed HTML (Embed a site / code)_ with the snippet and set the element tall enough (~900px), because Wix wraps it in a fixed-size frame. A link button (Option A) is often the cleaner choice on Wix.
- **Shopify / other builders:** use any "custom HTML / liquid / code" section.

## Acceptance criteria

1. A "Book a table" call to action is visible above the fold on the homepage and in the main navigation (mobile and desktop).
2. If embedded: the form appears on the reservations page/section, fills the content column up to 600px, has no inner scrollbar, and the content below it moves as the form grows.
3. The form loads in the intended language.
4. Nothing on the page breaks layout on a 375px-wide phone.
5. No console errors related to DineSpot (CSP, blocked frames, mixed content).

## Testing

- Open the page, pick a party size, date and time, and confirm the form resizes smoothly.
- **Do not submit a test booking** unless the site owner agrees: every submission creates a real reservation and notifies the restaurant and the guest. If one is made, ask the owner to cancel it in the DineSpot dashboard.

## Support

Questions about DineSpot itself: contact@dinespot.com · https://dinespot.si/lp/docs