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:
- Log in to the Timekit Admin Console.
- From the side navigation menu, select API Settings.
- Under Server-side widget, find your App API Key.
- 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.png)
How-To: Perform a resource sync:
- Sign in to the Tulip Admin Console.
- From the navigation pane, select Tulip Admin > Appointments Sync.
- In the Resource Sync section, select Start Sync.
- 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:
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>
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.png)
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>