# Widget

Paste one script tag where bookings should appear: `<script src="https://daybag.io/widget.js" data-org="your-slug" async></script>`. Your booking flow renders in place, or behind a floating Book now button with `data-mode="button"`, and your page hears about each booking that confirms there through a `daybag:booked` event (paid ones confirm after Stripe Checkout, on the `booking.confirmed` webhook).

URL: https://daybag.io/docs/widget

## Install
Paste it where bookings should appear. The flow renders right after the tag, or inside `data-target`.
```html
<script src="https://daybag.io/widget.js" data-org="your-slug" async></script>
```

## Button
A Book now pill in the bottom-right corner opens the flow in a dialog; Escape or a click outside closes it.
```html
<script src="https://daybag.io/widget.js" data-org="your-slug" data-mode="button" async></script>
```

## Options
- data-org (e.g. big-sky): Your booking page slug. Required.
- data-offering (e.g. 8f1c2e4a-0b7d-4c55-9a7e-3f2d1c0b9a88): Open straight to one offering.
- data-mode (e.g. button): inline (default) renders in place; button floats a pill that opens it.
- data-label (e.g. Book a trip): The button's text. Default "Book now".
- data-target (e.g. #book): CSS selector to render into, instead of next to the tag.

## After a booking
Fires on your page when a booking confirms in the widget, with the org and the booking's reference. A paid booking goes to Stripe Checkout instead and confirms when the payment lands; hear about those with the booking.confirmed webhook.
```js
window.addEventListener("daybag:booked", (event) => {
  const { org, reference } = event.detail; // e.g. "big-sky", "0GWYRZ2V"
});
```

## Payments
When guests pay at booking, the widget holds their place for 35 minutes and sends the page to Stripe Checkout. Paying confirms it and lands the guest on their booking page. Follow those with `booking.confirmed` webhooks.

## Site builders
Step-by-step guides for the website builders outfitters use.
- Squarespace (Code block): https://daybag.io/guides/squarespace
- Webflow (Code Embed): https://daybag.io/guides/webflow
- WordPress (Custom HTML block): https://daybag.io/guides/wordpress
- Wix (Embed HTML): https://daybag.io/guides/wix
- Shopify (Custom Liquid section): https://daybag.io/guides/shopify
- Framer (Embed): https://daybag.io/guides/framer
- Google Sites (Embed code): https://daybag.io/guides/google-sites