All Collections
Booking Widget (booking.js)
Introduction
Introduction to Timekit's Booking Widget
Introduction to Timekit's Booking Widget

Learn about the Booking Widget, and where to go next.

d
Written by derrick mak
Updated over a week ago

Timekit offers much more than a powerful booking API. To make sure we uphold the integrity of the API, we could see no better way than using it ourselves every single day. This led us to create our beautiful Booking Widget.

The Booking Widget we created has an alias in the developer world, and is known as: booking-js. The Booking Widget is open source, meaning that everything about is open for the public to see. You can even download the entire project and play around with it yourself.

We want everyone to be able to consume the Timekit API with ease, and create their own beautiful booking experiences that suit the needs of their business. Having fully customisable booking widget is one of the ways we hope to accomplish this.

What does the Booking Widget offer?

The Timekit Booking Widget offers a way in which to set up a bookable widget within minutes. All you need to get started is to create an account from our admin page, create a project (so we can define appointment lengths, etc..) and you're done!

There are many variations of how you can use Timekit's Booking Widget, and the above example is the simple and fast way to do it. This however, is only the tip of the iceberg. In the next couple of minutes, we will look a little more in depth at the possibilities of the Booking Widget.

A Booking Widget in minutes!

If you have already set up an account with Timekit, you will be able to see how the widget works simply by navigating to your projects and pressing "preview". This will open up our your widget and you can book a slot immediately.

When you wish to share your widget, you can either use Timekit's hosted page, or you can embed a small piece of code on your website to have it show up there. It really is that simple. More information can be found if you navigate your projects "share" settings while using Timekit's admin.

Once you have your Booking Widget up and running, have a look at some of the other options offered directly inside the admin interface. You will find that you can control how bookings get accepted, the appearance and much more from your project settings.

Creating an advanced Booking Widget

Once you have your Booking Widget up and running, you may find yourself wanting even greater control. You might wish to change the language or write the placeholder text yourself. This cannot be done directly from our admin interface. If you have a little experience with HTML and Javascript, there are tons of ways you can modify and customise your Booking Widget.

The way to do this is by adding configurations when you initialise the Booking Widget. Since there are so many ways to do this, we wont go into further detail about how to do so in this article. Instead we have created a series of detailed articles showing exactly how you can do this here

Essentially you have infinite ways you could choose to modify Timekit's Booking Widget since it is open source. The entire repository is available on GitHub, but we recommend always building on top or using our guidelines to configure to ensure that you can always get the latest version. We maintain and improve it regularly.

Our Booking Widget is for everyone

We hope that you will enjoy using our Booking Widget for whatever purpose that suits your needs. Be it a single simple hosted page or an elaborate series of Booking Widgets using multiple resources and offering different services with your brand written all over.


As a final note, for a developer trying to play around with the Booking Widget for the first time, we have some good examples made for this exact reason. So download an example and try it out straight away.

Did this answer your question?