# Calendar Booking Page

Aurinko offers a prebuilt calendar booking page seamlessly integrated with its [Booking API](/scheduling/booking-api.md). This page streamlines the scheduling process for you and your clients, offering a user-friendly interface for booking appointments based on your defined availability profiles.

<div data-full-width="true"><figure><img src="/files/X6uM7chOIAUhCh0hsYN1" alt=""><figcaption></figcaption></figure></div>

### Key Features

***

* **Availability-Driven Booking**: Clients can only select time slots based on the pre-defined availability profiles.
* **Seamless Integration**: Works seamlessly with the [Aurinko Booking API](/scheduling/booking-api.md), managing bookings effortlessly.
* **Customization Options**: While offering a default design, the page follows the essential branding attributes specified for your Aurinko app (see Settings in the Aurinko portal).
* **Client-Centric Design**: Intuitive interface ensures smooth and hassle-free booking for your clients.

### Quick Start

***

* **Test Drive**: Experience the prebuilt booking page firsthand through Aurinko’s portal: [Create Your First Appointment Booking Page](/scheduling/create-your-first-appointment-booking-page.md).
* **Sample Code**: Explore the [open-source project](https://github.com/yoxel/aurinko-workplace-apps/tree/main/scheduler) showcasing the scheduler page:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!DOCTYPE html>
</strong>&#x3C;html>

    &#x3C;head>
        &#x3C;meta charset="UTF-8">
        &#x3C;title>Book&#x3C;/title>
        &#x3C;link rel="stylesheet" href="https://example.aurinko.io/scheduler/assets/salesforce-lightning-design-system.min.css">
        &#x3C;link rel="stylesheet" href="https://example.aurinko.io/scheduler/assets/styles.css">
    &#x3C;/head>

    &#x3C;body id="appContainer">
        
        &#x3C;script>
            var auClientId="{{YOUR_AURINKO_CLIENT_ID}}"
            var defaultProfileName="{{YOUR_DEFAULT_PROFILE_NAME}}"
        &#x3C;/script>

        &#x3C;script type="text/javascript" src="https://example.aurinko.io/scheduler/scheduler.js">&#x3C;/script>
    &#x3C;/body>

&#x3C;/html>
</code></pre>

### Integration

***

Host the sample calendar page at your domain, i.e. *calendar.mydomain.com*, and specify <mark style="color:red;">`{{YOUR_AURINKO_CLIENT_ID}}`</mark> in the index.html file. <mark style="color:red;">`{{YOUR_DEFAULT_PROFILE_NAME}}`</mark> is optional.

*Alternatively, we can host this page for you and associate your domain alias with your app's clientId.*

In either case, add your domain to the list of trusted domains in your Aurinko portal:

<div data-full-width="true"><figure><img src="/files/xBxBefsMWOyNRp81RxDH" alt=""><figcaption></figcaption></figure></div>

* You can view calendar availability for a given booking profile by specifying the profile's name in the URL path: <mark style="color:red;">`https://calendar.mydomain.com/{profileName}`</mark>. Those links are convenient for sharing by email.
* If you deploy the calendar page at a path then use hash segments to specify a profile and other parameters, i.e. <mark style="color:red;">`https://myapp.mydomain.com/pathTo/calendarPage/#profile={profileName}`</mark>. You can specify your clientId this way too.
* Our code always looks for the hash segment parameters first; then considers the path to be a profile name.

If you need to integrate the page into your existing website we recommend using an *iframe* which your code can redirect to different profiles as needed:

{% code fullWidth="true" %}

```html
<iframe id="myIframe"></iframe>

<script>
  document.getElementById("myIframe").src = "https://calendar.mydomain.com/#profile={profileName}";
</script>

```

{% endcode %}

The page supports the following parameters <mark style="color:red;">`#profile=&extensionProfile=&mode=&layout=&view=&...`</mark>:

* <mark style="color:red;">`profile`</mark> - The main booking profile name that determines the availability.
* <mark style="color:red;">`extensionProfile`</mark> - 2nd profile that will determine availability after the main profile's end date.
* <mark style="color:red;">`mode`</mark> - Use 'view' to disable booking capability.
* <mark style="color:red;">`layout`</mark> - Use 'month' for Calendly-like layout.
* <mark style="color:red;">`suppressInvitation`</mark> - Then 'true' an event will be created without any attendees. It becomes your code's responsibility to add attendees later.
* <mark style="color:red;">`date`</mark> - Display the booking profile with the pre-selected date and slots.
* <mark style="color:red;">`rescheduleToken`</mark>  - Allows a client to **reschedule an already booked event** without requiring authentication or access to the original calendar provider.

  The `rescheduleToken` is a unique code generated by Aurinko when an event is created.\
  It uniquely identifies the event and grants limited permission to **change the event’s date and time** through the scheduler UI.\
  \
  You can embed this token inside your booking description or notification email, for example:<br>

  <pre class="language-json" data-overflow="wrap"><code class="lang-json">"description": "Here is an event... If you want to change the time, please follow the link: https://example.aurinko.io/scheduler/#profile=Test_Booking&#x26;clientId=552f95116d0a08933203109d1ca124r4&#x26;rescheduleToken={{rescheduleToken}}"
  </code></pre>

For other custom integration scenarios please reach out to us at <support@aurinko.io>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurinko.io/scheduling/calendar-booking-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.