Timekit is a modular booking system because you have the ability to either use our pre-built UI components, customize them, or even build your own custom interfaces and power them up with Timekit through the API. 

This guide will point you in the right direction on how to approach Timekit from a more technical point of view.

The pre-built interfaces

Before we dive into customising our UI or building your own, let's talk about what you get out of the box. 

We offer two visual interfaces; First, a UI for owners to configure flows, set up bookable resources, and manage incoming bookings – we call this 'The Admin'. 

Secondly, we offer a UI for customers to book through, called 'The Project Widget' – think of a checkout form for bookings. Both can work as 'point-and-click' interfaces and can be set up via Timekit.io, but both also work in perfect harmony with custom interfaces created by you.

The core of Timekit is that you can use what we offer, you can create your own, or combine it. 

Often we see companies wanting to control the end user experience, and thus they create their own version of a customer facing UI. But they use our admin interface to control it. Or vice versa – since we continue to improve and optimize our project widget for better conversions, they opt to use our project widget, but create their own mini admin to control the brand experience towards their own employees.  

The Admin:

In our admin interface, you can add Bookable Resources, choose your Timekit Billing Plan, set up and configure Projects, and control sync for resources if you opted to connect to a Google calendar. If your Bookable Resources are humans, this is also where they can log-in and see incoming bookings. 

But the true beauty of Timekit is that you don't have to use our pre-built Admin Interface – you can build your own from scratch by simply utilizing our underlying API.

To get started with building your own Admin Interface you should start here: 

1: Creating bookable resources/users through your own product onboarding

2: Setting availability for bookable resources/users via the FindTime endpoint

The idea here is that you can add Timekit to your own product onboarding so when you are creating your own users, you are simultaneously creating users in Timekit.

The Project Widget:    

The Widget is an embeddable checkout form for bookings. It is a small piece of UI that you can create and configure via our Admin and subsequently add to any website. Out of the box, you get a Project Widget that will show bookings in a week view on desktop and shift to a day view on mobile devices. But you can do much more with our Project Widget than what we offer out of the box. 

Our Project Widget is built upon an open sourced framework that we call "Booking.js" and you can use it in two ways: 

  1. Passing config to it on-the-fly.
  2. Have it load the config remotely from our datastore. 

Read the documentation on booking.js here:
Read more about the endpoints used for loading configs remotely

Further customizations

Building custom UI is not the only way to customise Timekit and get exactly what you need. Here are a few guidelines on more customization you can do: 

Custom emails: 

On the paid plans of Timekit, you can disable the default emails that are sent from notify@timekit.io and instead use your own ones.  Webhooks are triggered throughout the booking flow so that you can choose exactly how and when to communicate with your customers. Read more about webhooks.

Adding payments:

Out of the box, Timekit does not support payments in the booking flow. However, you are still able to add payment functionality. You need to select a graph (read more about what graphs are) with a payment step. This will enable Timekit to "wait" for a payment gateway to issue a transaction ID before confirming a booking. Read more about payments.

Customised availability filters:

Timekit support rule based availability search. This means that you don't have to use the "opening hours" offered in our admin. Instead, you can create your own custom ones. Read about FindTime filters.

If you want to learn more about customising Timekit including building custom interfaces powered by the API or customising the end-user experience you can visit our developer docs here:
Timekit API Reference 

If you have any questions - let us know on the chat 👉

Not what you were looking for? 

If you were looking for a more non-technical 'get started' guide, we recommend that you read our how to create your first project guide. 

Did this answer your question?