# Add bookings to Framer

Drop Framer's Embed component where bookings should go, switch it to HTML and paste your daybag script tag. Framer shows HTML embeds in a frame of their own, so give it a fixed height of about 700 px. For a floating Book now button on every page, add the button version to your site's custom code instead.

URL: https://daybag.io/guides/framer

## Steps
1. Copy your tag: In daybag, open Dashboard → Developers → Widget, pick Inline or Button, and copy the tag. Your slug is already in it.
2. Add an Embed: In Framer, open Insert, search for Embed and drag the Embed component onto the page.
3. Paste the tag: In the Embed's settings, choose HTML and paste the tag. Set the width to fill and the height to about 700 px.
4. Publish and check: Publish the site and open the live page.

## Your tag
Inline:
```html
<script src="https://daybag.io/widget.js" data-org="your-slug" async></script>
```
Button:
```html
<script src="https://daybag.io/widget.js" data-org="your-slug" data-mode="button" async></script>
```
Replace `your-slug` with your booking page's slug, or copy the tag from Dashboard → Developers → Widget with it filled in.

## Inline or button
- Inline, the default, renders the booking flow right where you paste the tag.
- Button: `data-mode="button"` floats a Book now pill in the corner that opens the flow. For the button on every page, open your site settings → Custom Code, paste the button version at the end of <body>, and publish.
- Link: your booking page, `https://daybag.io/book/your-slug`, is the same flow on a page of its own.

## Test it
1. Open the published page in a private window, as a guest would.
2. Book a test with your own email: the confirmation lands in your inbox.
3. Find the booking in Dashboard → Bookings and cancel it there.

## FAQ
### Why is the Embed blank in the editor?
Framer may not run embed scripts on the canvas. Check the published site.
### Can guests pay at booking?
Not inside the Embed: Stripe Checkout can't open in Framer's frame. Use the button through custom code, or link a button to your booking page.
### Can the widget open one offering?
Yes. Add `data-offering` with the offering's id: the end of its booking link in your dashboard, after `?offering=`.
### What if my builder won't run the tag?
Link a button to your booking page, `https://daybag.io/book/your-slug`. It's the same booking flow on a page of its own.