Embedding the Booking Page

Once you have installed the Embedded Scheduler library you can then include the cronofy-scheduler-booking-page element within your page’s HTML:

For example:

<cronofy-scheduler-booking-page
  id="my-booking-page"
  embed-token="{EMBED_TOKEN}"
  scheduling-request-id="{SCHEDULING_REQUEST_ID}"
></cronofy-scheduler-booking-page>

The following element attributes are required to set up the embeddable booking page:

embed-token required  #

For the cronofy-scheduler-booking-page element, the aud value needs to be set to scheduler_embed_booking_page.

scheduling-request-id optional  #

One of scheduling-request-id or primary-select-url must be passed to identify the Request to show a booking page for.

The scheduling_request_id for the request, this is returned in the response when creating a request via the Embedded Scheduler, it will look similar to srq_688b3344a5db6f193530d203.

primary-select-url optional  #

One of scheduling-request-id or primary-select-url must be passed to identify the Request to show a booking page for.

The primary_select_url for the request, this is returned in the response when creating a request via the Embedded Scheduler, it will look similar to www.app.cronofy.com/rts/<TOKEN>.

UI state events #

You may be aware of Scheduler Workflows that allow you to configure redirects off the back of user interactions. However, Scheduler Workflow redirects are not supported for the embedded cronofy-scheduler-booking-page.

The cronofy-scheduler-booking-page element emits the following events to which your application can listen for closer UI integration:

• scheduling_request_time_chosen - When an initial time slot is selected via the booking page
• scheduling_request_rescheduled - When a Request is rescheduled by the recipient via the booking page
• scheduling_request_declined - When a Request is declined by the recipient via the booking page
• scheduling_request_no_times_available - When the recipient visits the booking page, but there were no slots available
• scheduling_request_more_times_requested - When the recipient visits the booking page and requests more times (selects “I can’t do any of those times”)

You can register the event listener using addEventListener:

document
  .getElementById("my-booking-page")
  .addEventListener("scheduling_request_time_chosen", function(event) {
    console.log("scheduling_request_time_chosen event received", event);
  });

The event emitted contains details of the request in the detail attribute. Note attendee information is omitted from this object, to maintain a level of privacy for the individuals present on the request.

{
  "scheduling_request": {
    "scheduling_request_id": "srq_688b3344a5db6f193530d203",
    "slot_selection": "complete",
    "primary_select_url": "https://app.cronofy.com/r/234ebnd",
    "dashboard_url": "https://app.cronofy.com/scheduler/requests/52b65401a5d87bb4f0bee44e",
    "summary": "Driving Test - Marty & Doc",
    "recipient_operations": {
        "view_url": "https://app.cronofy.com/r/234ebnd",
        "decline_url": "https://app.cronofy.com/r/234ebnd?decline=true",
        "reschedule_url": "https://app.cronofy.com/r/234ebnd?reschedule=true"
    },
    "event": {
        "start": {
            "time": "2025-08-01T15:00:00+01:00",
            "tzid": "Europe/London"
        },
        "end": {
            "time": "2025-08-01T15:30:00+01:00",
            "tzid": "Europe/London"
        },
        "summary": "Driving Test - Marty & Doc"
    },
    "duration": {
        "minutes": 30
    },
    "coordinator_sub": "acc_6717a49426e06a0ef69d01dc"
  }
}

Additional security considerations #

You may optionally restrict the Embed Token’s subject to only allow embedding a single Request. This ensures that the element’s attributes may not be manipulated to show the booking page for any other Requests.

To do this, add a sub claim when generating the Embed Token.

sub optional  #

As a claim within the Embed Token JWT; The scheduling_request_id which the Embed Token is valid to show a booking page for.

If provided, then the Booking Page element cannot be configured to display the booking details of any other request.

If omitted, then the Embed Token is valid for any Scheduling Request created by your application using the Embedded Scheduler.