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).

Plain text

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-orgYour booking page slug. Required.

data-offeringOpen straight to one offering.

data-modeinline (default) renders in place; button floats a pill that opens it.

data-labelThe button's text. Default "Book now".

data-targetCSS 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.

window event · daybag:booked

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.