This article will require basic web developer skills. We will assume that you can use basic html and javascript throughout this article.

In this article, we will explore Timekit's booking.js library, particularly, initialization and customization. Furthermore, we shall try and prepopulate the custom fields by grabbing them from the url and inserting them where needed.

What you will need

First and foremost, we will need to gather a few things before we can start. This is to make sure we have all the necessary keys and tokens to be able to complete this guide smoothly. All of the following can be found by logging into your account on admin.timekit.io.

  1. Account email
  2. Api token
  3. Calendar id
  4. App id

Setting up a test page

Once we have gathered the above information, we need a place to create our project. This can be done anywhere you please, be it your website or in a plain html document. We will be using a single page document this demonstration.

The absolute fastest way to get started is by using one of our examples from booking-js. To find these examples, head on over to booking-js examples. Pick the example file called: fields.htm and clone/copy it to your computer. When you load this file into your browser, you will see loaded project with some Timekit mock data.


Gathering data to prepopulate

There are many ways to gather the information needed, and we will leave it in your hands on deciding how you wish to do this. Since it doesn't have anything to do with using Timekit, we will keep this stage simple.

In this example, we will gather our data from the url. This means we need to add some parameters we can fetch. We suggest using the loaded fields.htm file we loaded in the previous section as a staring point. We will pretend that we have been redirected to the page where the project is displaying a widget, and there have been added some parameters to the url. Add the following to your url:
?name=Marty%20McFly&email=martymcfly%40timekit.io 

Your url should now look something like this, although with a proper path to the location of your fields.htm file:
file:///<path to your desktop>/fields.htm?name=Marty&email=martyyyy

Once we have added the name and email parameters to our url, it is time to fetch them and prepopulate our input fields. Since the searchParams property of the URL interface returns an object allowing us to access the GET query arguments in the URL like this:
let params = (new URL(document.location)).searchParams;

Prepopulating the input fields

Last step is to input our gathered name and email into the input fields for our user. This is done by adding a booking fields object during initialization of our project. The bookings fields can then be prefilled by adding a prefilled key in each of the inputs respectively.

You can see this in our example below:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Booking.js custom booking fields example</title>
  <style type="text/css">
    body { background-color: #E6E6E6; max-width: 700px; margin: 0 auto; }
  </style>
 </head>
 <body>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.timekit.io/booking-js/v1/booking.min.js"></script>
  <div id="bookingjs">
    <script type="text/javascript">

      let params = (new URL(document.location)).searchParams;

      TimekitBooking().init({
        name:     'Doc Brown',
        email:    'marty.mcfly@timekit.io',
        apiToken: 'XT1JO879JF1qUXXzmETD5ucgxaDwsFsd',
        calendar: '22f86f0c-ee80-470c-95e8-dadd9d05edd2',
        avatar:   '../misc/avatar-doc.jpg',
        app:      'back-to-the-future',
        bookingFields: {
          name: {
            prefilled: params.get('name'),
            placeholder: 'Your name please'
          },
          email: {
            prefilled: params.get('email'),
            disabled: true
          }
        }
      });
    </script>
  </div>

</body>
</html>


You should now be able to prefill any of our six booking fields without a problem. Remember to insert your own email , apiToken , calendar id,  and app id, in order for your own project to show up.

Did this answer your question?