Skip to content
Gaurav TiwariDocs

Add the Booking Form, Service Directory and Popup Button

Updated October 22, 2026

A service doesn’t take bookings until customers can reach its form. You have three ways to put it in front of them: a full booking form on a page, a directory that lists all your services, or a button that opens the form in a popup. Each one works as a block or a shortcode, so it fits the block editor, a classic page or a page builder’s shortcode widget.

Every service also has its own built-in booking page, so you can share a link before you’ve built anything.

Use the Built-in Booking Page

Go to Bookings → Services and click Booking page on a service card. It opens a standalone page with the form for that service, at an address like this:

https://example.com/?cb_booking=1&service=12

The number is the service ID. Paused services show a disabled Booking page button until you turn Available for online booking back on.

Add the Booking Form

In the block editor, insert the Core Bookings block and pick a service under Booking service, or choose All available services to let visitors pick. Managers can also click Create service to build a new one without leaving the editor.

Anywhere else, use the shortcode. Copy it from Embed shortcode on the service card:

[core_bookings service="12"]

Leave out service to show a service picker with every listed service. The block’s sidebar adds controls the shortcode doesn’t have:

  • Content and labels: headings, introductions, the Continue button and Confirm button text, the Consent label and the confirmation message. Empty fields use the default text in the site language.
  • Display: Show step indicator, Show service summary, Show service description and Show service location.
  • Layout and spacing: Responsive columns or Single column, maximum width, padding, gap and corner radius.
  • Colors: accent, text, secondary text, form background, field background and borders. Reset styles puts them back.

These change only that block. Prices, availability and booking rules always come from the service.

List Services in a Directory

The Core Bookings service directory block, or [core_bookings_directory], lists your listed services with their category, length, price and a Book link. When a service offers several durations, it shows the range and a “From” price.

Shortcode attributeBlock settingWhat it does
category="Massage"CategoryShows only that category, without tabs.
search="no"Show searchHides the search box. Search is on by default.
popup="yes"Open booking forms in a popupBook opens the form in a dialog instead of the service’s booking page.

Category tabs appear on their own once there’s a real choice: two or more categories, or one category next to uncategorized services. Search ignores case and accents. Without JavaScript the full list still shows and every Book link works. Try it on the demo services directory.

Add a Popup Button

The Core Bookings popup button block, or this shortcode, puts a button anywhere on a page that opens the booking form in a dialog:

[core_bookings_button service="12" label="Book a call"]
  • Without a label, the button says “Book now”.
  • Leave out service, or use service="0", to offer every listed service inside the popup.
  • The form loads only when the dialog first opens, so a page with several buttons stays light.
  • Escape, the close button or a click on the backdrop closes it, and focus returns to the button. Without JavaScript, the button is a plain link to the booking page.

Good to Know

  • The directory shows only services set to Listed. Unlisted and invitation-only services never appear there. See Durations, Categories, Guests, Limits and Visibility.
  • Popup buttons for paused, deleted or invitation-only services render nothing, so a stale button never leads to a dead form.
  • The directory and popup load their small script and stylesheet only on pages that use them. With UI style set to No UI Style in Bookings → Settings → General, the stylesheet is skipped so your theme can style them.
  • Any page with a booking form also accepts prefill links. See Invitation and Prefill Links.
Share

Was this helpful?

Still stuck? Open a support ticket