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.

Plain text

Steps

  1. 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. 2

    Add an Embed

    In Framer, open Insert, search for Embed and drag the Embed component onto the page.

  3. 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. 4

    Publish and check

    Publish the site and open the live page.

Your tag

Replace your-slug with your booking page's slug, or copy the tag from Dashboard → Developers → Widget with it filled in.

inline
<script src="https://daybag.io/widget.js" data-org="your-slug" async></script>
button
<script src="https://daybag.io/widget.js" data-org="your-slug" data-mode="button" async></script>

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.