Deploying Tulip Appointments

To get started using Appointments, you need to:

I. Find your Timekit keys
II. Sync Timekit and Tulip
III. Add the Appointments widget to your website

I. Find your Timekit keys

To get the Appointments widget working on your website, you need API keys from Timekit.

To find your Timekit keys:

  1. Log in to the Timekit Admin Console.
  2. From the side navigation menu, select API Settings.
  3. Under Server-side widget, find your App API Key.
  4. Under Client-side widget, find your App Widget Key.

II. Sync Timekit and Tulip

In order for Timekit and Tulip to be synchronized, you must manually perform a resource sync. Performing a resource sync checks for any changes made to employees or stores in the Admin Console since the last sync and updates them in Timekit. The resource sync only syncs Clienteling data for enabled employees and stores.

Note
You need to do a resource sync every time there are changes in data related to employees or stores. Changes to data occur through DAL API calls, File Importer, or the Admin Console. Some examples of when you need to do a resource sync: employees leaving the organization, new employees joining, store locations closing permanently, new store locations start operating, etc.

How-To: Perform a resource sync:

  1. Sign in to the Tulip Admin Console.
  2. From the navigation pane, select Tulip Admin > Appointments Sync.
  3. In the Resource Sync section, select Start Sync.
  4. Select Start Sync.

III. Add the Appointments widget to your website

The Appointments widget can be added to your website by inserting a couple of pieces of code into your source files.

Prerequisite: Install JQuery v2 or v3.

How-To: Add the Appointments widget to your website:

  1. Add the following code to the HEAD section of your website:

     <script src="https://cdn.jsdelivr.net/npm/@tulipnpm/timekit_project_selector@latest/dist/timekit_project_selector.min.js"></script>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>


 <script src="https://cdn.timekit.io/booking-js/v2/booking.min.js" defer></script>

  2. Add the following JavaScript to your page to initialize the widget.

     timekit_project_selector.init({


     app_key: <timekit_app_key>,


 }).then(() => {


     // Your code here...


 });
Note
Supply your App Widget Key to the app_key config variable, not your App API Key.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeKit Project Selector Demo</title>

    <script src="https://cdn.jsdelivr.net/npm/@tulipnpm/timekit_project_selector@latest/dist/timekit_project_selector.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
    <script src="https://cdn.timekit.io/booking-js/v2/booking.min.js" defer></script>
</head>
<body>
    <h1>TimeKit Project Selector Demo</h1>

    <script>
        const tps = timekit_project_selector;

        tps.init({
            app_key: 'YOUR-WIDGET-API-KEY', // Insert your Timekit API key here
            region: 'Canada',        // Use this to dynamically filter by region
            defaultUI: true,         // Display the default UI
            embed: false,            // Display the UI embedded on the page inside an existing div if true, or floating above the page if false
            selectorOptions: {
                // Putting t_store_id first indicates that you would like to first allow
                // customers to filter by store, before seeing available appointments.
                // You can also switch the order to allow customers to instead filter by
                // Appointment Type first.
                t_store_id: { 
                    title: 'Select a Store',
                    description: 'Choose a store from the following that you will be visiting for your appointment.',
                    card_title: '[meta]t_store_name',
                    card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
                    card_footer: '[meta]t_store_phone'
                },
                t_appointment_type_name: {
                    title: 'Select an Appointment Type',
                    description: 'Which appointment type would you like?',
                    card_image: '[meta]t_appointment_type_image',
                    card_title: '[meta]t_appointment_type_name',
                    card_body: '[meta]t_appointment_type_description',
                    card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}'
                }
            }
        }).then(() => {
            // Your code here ...
        }).catch((error) => {
            // Something went wrong
        });
    </script>
</body>
</html>
← Customer Profile
HOW-TO: LiveConnect Integration with WhatsApp →