When using our Booking Widget, you might not want to have your customers fill in all information manually. Perhaps you've already collected their contact information already or might want to lock certain fields to static values that the customers can't change.

Before we get started, you might want to read about how to make code customizations in the widget. Or, feel free to skip ahead and start copy pasting if that's your cup of tea.

What can we do with the input fields?

Customer fields are a flexible and convenient way to collect information from your customers. Per default, there are two fields that are always required in the form: name , email . In addition to that, you can define your own fields through our admin dashboard for each of your projects.

There are two approaches:

1. Prefill from URL parameters

If you follow a certain format, the widget will automatically fetch values from your URL and inject that into the customer fields. This works with both the hosted page and when embedding on your own website.

URL example:

http://yourwebsite.com/?customer.name=Marty&customer.comment=Something

To clarify, each of your fields you want to prefill should have their own query string key that is named customer.[field-slug] . You can find the field slug in our admin panel when you add fields to the form.

2. Inject dynamically through JavaScript

If you're embedding the widget in a web application or alike where you have customer information saved in your application state, you can pass it the widget upon initialization through the config.

The customer_fields key in the widget config follows the Projects model that is saved through our API. To prefill a name and comment field, you should structure your JS object (config) like this:

customer_fields: {
  name: {
    prefilled: 'Marty',
    readonly: true
  },
  comment: {
    prefilled: 'Something something darkside'
  }
}

In practise the values would of course be data from variables and not static strings.

Note that in the above example, we've also locked the name field (read only) so your customers can't change the prefilled value. This is done by setting locked: true on each field.

Here's a full code example:

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

      // The customer info would most likely come
      // from somewhere in your web application
      var customerName = 'Marty'
      var customerEmail = 'marty.mcfly@timekit.io'
      var customerComment = 'Something something darkside'

      // Initialize the widget and inject
      // the variables into the config
      TimekitBooking().init({
        app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
        project_id: 'your-project-id',
        customer_fields: {
          name: {
            prefilled: customerName,
            readonly: true
          },
          email: {
            prefilled: customerEmail,
            readonly: true
          },
          comment: {
            prefilled: customerComment
          }
        }
      });
    </script>
  </div>

To learn more about customer fields and the possible customization options, please see the booking.js docs.