# Embedding the Booking Page

> **INFO:** Supported by [cronofy-scheduler-embed](https://www.npmjs.com/package/cronofy-scheduler-embed) **v0.3.0** and newer

Once you have [installed the Embedded Scheduler library](/developers/embedded-scheduler/installing-and-embedding/index.md) you can then include the `cronofy-scheduler-booking-page` element within your page's HTML:

For example:

```html
<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)*

The JWT generated for each page view, as described in the ["Generating Embed Tokens" section](/developers/embedded-scheduler/installing-and-embedding/index.md).

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](/developers/embedded-scheduler/installing-and-embedding/index.md) when creating a request via the Embedded Scheduler, it will look similar to `srq_688b3344a5db6f193530d203`.

##### `primary-select-url` *(optional)*

> **INFO:** The Booking Page embed element does not currently support Public Link URLs.

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](/developers/embedded-scheduler/installing-and-embedding/index.md) 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](/scheduler/workflows/index.md) 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`:

```javascript
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.

```json
{
  "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.



---
[Read in HTML](/developers/embedded-scheduler/booking-page/)