# Calendar Booking Page

Aurinko offers a prebuilt calendar booking page seamlessly integrated with its [Booking API](https://docs.aurinko.io/scheduling/booking-api). 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="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2FA7PIV7oXNgteOVowvN45%2Fimage.png?alt=media&#x26;token=07557460-ce4e-4fe0-9670-8ef9122f3b0e" 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](https://docs.aurinko.io/scheduling/booking-api), 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](https://docs.aurinko.io/scheduling/create-your-first-appointment-booking-page).
* **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="https://3933352743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ua36KLVlbUN5bA2bgiq%2Fuploads%2FHzlG6vxYMrxlhZ33nXah%2Fimage.png?alt=media&#x26;token=71946be6-1f0f-435e-a5b9-5502bc9a4870" 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>.