<BookingModal />
The booking flow modal that opens when a visitor clicks an empty slot placeholder.
Overview
BookingModal is rendered automatically by AdSlot when a visitor clicks an empty placeholder. You do not need to render it manually in most cases.
The modal is exported from adkit-react if you need to invoke it outside of the standard slot flow, but its primary purpose is internal to AdSlot.
How the booking flow works
Visitor clicks the placeholder
When an AdSlot is in the empty state, clicking the "Rent this spot" button opens the BookingModal inline — no page navigation required.
Modal displays the opportunity
The modal shows the slot name, price, and a list of what's included: exclusive placement, fixed price, preview before payment, dashboard tracking, and the 24/7 uptime guarantee.
Visitor clicks "Book this ad"
The modal redirects to adkit.dev/book with your site ID, slot name, and the referring page URL. The price is fetched server-side — it is never passed in the URL to prevent manipulation.
Advertiser completes checkout
Stripe handles payment. The advertiser selects dates and uploads their creative on the Adkit booking page.
You receive the approval request
A notification appears in your Adkit dashboard. You review the creative and approve or reject it before anything goes live.
Props
These are the props used internally by AdSlot when it renders the modal. If you import BookingModal directly, you must provide all required props.
| Prop | Type | Required | Description |
|---|---|---|---|
| siteId | string | Yes | Your Adkit site ID |
| slot | string | Yes | The slot identifier |
| price | number | No | Daily price in cents to display in the modal. If omitted, no price is shown. |
| onClose | () => void | Yes | Called when the modal is dismissed (Escape key, backdrop click, or Cancel button) |
Booking URL
When the advertiser clicks "Book this ad", they are redirected to:
The price is not included in the URL. It is fetched server-side from your dashboard configuration, preventing any client-side price manipulation.
Modal behavior
- Pressing Esc closes the modal
- Clicking the backdrop (outside the card) closes the modal
- Body scroll is locked while the modal is open
- Only one modal can be open at a time
- The modal is accessible:
role="dialog",aria-modal="true"
Direct usage
If you need to trigger the booking modal programmatically from a custom UI element:
AdSlot manage the modal automatically. Use direct rendering only if you need a booking CTA that is visually separate from the ad slot itself.