Calendar Booking Page

Streamline scheduling with Aurinko's integrated calendar booking page, designed for seamless client interactions and effortless appointment management.

Aurinko offers a prebuilt calendar booking page seamlessly integrated with its 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.

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, 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.
Sample Code: Explore the open-source project showcasing the scheduler page:

<!DOCTYPE html>
<html>

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

    <body id="appContainer">
        
        <script>
            var auClientId="{{YOUR_AURINKO_CLIENT_ID}}"
            var defaultProfileName="{{YOUR_DEFAULT_PROFILE_NAME}}"
        </script>

        <script type="text/javascript" src="https://example.aurinko.io/scheduler/scheduler.js"></script>
    </body>

</html>

Integration

Host the sample calendar page at your domain, i.e. calendar.mydomain.com, and specify {{YOUR_AURINKO_CLIENT_ID}} in the index.html file. {{YOUR_DEFAULT_PROFILE_NAME}} 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:

You can view calendar availability for a given booking profile by specifying the profile's name in the URL path: https://calendar.mydomain.com/{profileName}. 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. https://myapp.mydomain.com/pathTo/calendarPage/#profile={profileName}. 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:

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

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

The page supports the following parameters #profile=&extensionProfile=&mode=&layout=&view=&...:

profile - The main booking profile name that determines the availability.
extensionProfile - 2nd profile that will determine availability after the main profile's end date.
mode - Use 'view' to disable booking capability.
layout - Use 'month' for Calendly-like layout.
suppressInvitation - Then 'true' an event will be created without any attendees. It becomes your code's responsibility to add attendees later.
date - Display the booking profile with the pre-selected date and slots.

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

PreviousCreate your first appointment booking page NextBooking API

Last updated 1 month ago

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Book</title> <link rel="stylesheet" href="https://example.aurinko.io/scheduler/assets/salesforce-lightning-design-system.min.css"> <link rel="stylesheet" href="https://example.aurinko.io/scheduler/assets/styles.css"> </head> <body id="appContainer"> <script> var auClientId="{{YOUR_AURINKO_CLIENT_ID}}" var defaultProfileName="{{YOUR_DEFAULT_PROFILE_NAME}}" </script> <script type="text/javascript" src="https://example.aurinko.io/scheduler/scheduler.js"></script> </body> </html>