Here’s what you need to know

  • If you just want the basics on how to add a booking widget to your website or CMS, check out our article How to embed the TIMIFY booking widget in your website or CMS.
  • In this article we dive deep, and show you how to make customisations that deliver really impressive results. We give you the script you need to do things like change the colour of your widget overlay, pre-select a service, or pre-fill customer details.

 Here's how the article is structured:

  1. Customisation options for a booking widget overlay
  2. Customisation options for a booking widget iFrame
  3. Customisation options using our REST API

Scroll down to your preferred option and we'll walk you through the customisations we offer:

1. Customisation options for a booking widget overlay

STEP 1:

In TIMIFY, go to Booking setup -> Integration -> and select Booking button from the tab. Then select “flexible position”.

STEP 2:
The flexible position doesn’t include the "data-id" attribute, as your booking ID lies within the HTML element that you have just defined as your booking button.

As you’re going to edit the appearance and positioning of the button, the parameter "data-position" needs to have  the value “flexible".

Paste the snippet code right before the </head> or the </body> tag of your template.


STEP 3:
Now let's define the HTML element on your website that allows the browser to open the widget. You usually have one of the following HTML elements:

However, you can choose any other HTML tag for your button. Please always note that you need to:

  • add a class "timify-button" for the element to which the snippet refers
  • add the attribute "data-account-id=" with your TIMIFY booking ID within the ""

Here are all the parameters (instructions) you can add to your code.


Use the below list of parameters (we’ve added handy explanations!) to adjust your widget, so that you can make it appear exactly how you like.  Attributes can be integrated into existing snippets as follows:

  • data-position = "multiple"
    Allows multiple buttons to be positioned on the same page.
  • data-custom-button-image= "https://www.yourwebsite.com/images/button.jpg" Allows the replacement of the standard button with an individual button graphic.
  • data-button-attribute = "data-account-id"
    Allows the attribute data-account-id to be re-named. I.e., you can replace data-account-id = “your-TIMIFY-Company-ID" with timify-id = "your-TIMIFY-Company ID” 
  • data-account id="5asdf44d36438e110852777e"
    Your TIMIFY account ID.
  • data-company-external-id= "1A2B3C4D5E"
    The external account ID of the account/location.
  • data-enterprise-id= "5d3bgg5d36438e110852777e"
    The ID of your enterprise account.
  • data-hide-close-button= "true"
    Removes the widget's close button (top right).
  • data-fullscreen= "true"
    Opens the widget in full screen mode.
  • data-show-services= "5e1c4da96456f911e04bc18c, 4e1c34a96456f911e04bc18c"
    Only shows the pre-defined services in the first step of the booking widget.
    Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.
  • data-hide-services= "5e1c4da96456f911e04bc18c"
    Do not show the pre-defined services in the first step of the booking widget. Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.
  • data-course-id= "5e1c4da96456f911e04bc18c"
    Skips the first step and automatically selects the defined group event.
  • data-event-id= "5e1c4da96456f911e04bc18c"
    Skips the first step and automatically selects the defined booking.
  • data-resource-id= "5e1c4da96456f911e04bc18c"
    Automatically selects the defined resource.
  • data-resource-external-id= "12345678"
    Use the external ID of the resource to pre-select the resource in the booking widget.
  • data-show-selected-resource-only= "true"
    Displays only the pre-selected resource in the resource overview.
  • data-filter-resources= "5e1c4da96456f911e04bc18c, 5e1c4da96456f911e04bc18c"
    Filters the resources in the booking widget and only shows the defined resource IDs.
  • data-filter-resources-by-external-id= "5e1c4da96456f911e04bc18c, 5e1c4da96456f911e04bc18c"
    Uses the external resource ID to filter the resources in the booking widget.
  • data-date= "2019-08-17"
    Automatically displays the defined date.
  • data-date-range= "2019-08-17: 2020-09-17"
    Filters a pre-defined period for the date selection.
  • data-disable-other-dates= true
    De-activates all other days except those defined via the attribute
    data-date-range or data-date 
  • data-overlay-color= "# 000000"
    Changes the background colour of the overlay.
  • data-overlay-opacity= "0.5"
    Changes the opacity of the background colour of the overlay.
  • data-show-guest-booking-form= "true"
    Only the guest booking is displayed as the authentication method.
  • data-guest-firstname = "Max"
    Fills in the booker's first name automatically in the guest form.
  • data-guest-last name = "Smith"
    Fills in the booker's last name automatically in the guest form.
  • data-guest-email = "max.mustermann@.com"
    Fills in the email of the booker in the guest form automatically.
  • data-guest-phone = "089123456789"
    Fills in the booker's phone number in the guest form automatically.
  • data-guest-phone country = "en"
    Fills in the country code of the phone number of the booker in the guest form.
  • data-skip-customer fields-section = "true"
    If all the data on the form is pre-filled with parameters, the guest form is completely skipped and the booking confirmation page is displayed directly.
  • data-customer-field-1 = "<ID> - <VALUE>"
    Fills in all customer fields in the guest booking form. The ID of the customer field must be added in the area of the ID (you can copy this on the detail page of the customer field) and the Value area contains the pre-filled value. You can pre-fill several customer-specific fields in this way by changing the number to "data-customer-field-", e.g. data-customer-field-1 = 5e1c4da96456f911e04bc18c-Allianz & customer-field-2 = 4d4g4da96456f911e04bc18c-Privat
  • data-secret = "eventid-secret"
    In the event that you want to postpone an existing booking, you can trigger the postpone by transferring the event ID and event secret, e.g. data-secret = "5e1c4da96456f911e04bc18c-xx991882owks00921ms0923109381872m8dn3872nmds983kksiahdhd"
  • data-pre-reservation-key = "secret"
    If you want to load a pre-reservation in the widget, the pre-reservation secret must be entered here.
  • data-locale = "en-en"
    Automatically changes the default language setting of the booking widget.
  • data-customization-id
    Loads the customisation for the booking widget
  • data-template-customization-id
    Sends the notifications with the corresponding individual email template after successful appointment booking / postponement.

-----------------------------------------------------------------------------------------------------------------------------

Customisation options for a booking widget iFrame


 To see a live example of how a user has customised their iFrame widget, click here



The code snippet for the iFrame should look something like this:
https://book.timify.com/services?accountId=5c98a186e604f7102e633108 "width =" 100% ">

Copy and paste this code into the HTML of the page where you want the widget to appear on your page. Don't forget to adjust the URL in the "src" attribute according to your account by using the individual booking ID for your account. You can also change the height and width of the Define iFrame by changing the values of the parameters ("height" or "width") in the code above.

With the following parameters you can make further settings in your widget and adapt the booking process perfectly to your requirements. A parameter is always appended with a "&" to the existing widget URL (e.g. https://book.timify.com/services?accountId=5dcbe3b8a5b5fa1116d16711&enterpriseId=5dcbe35d36438e110852777e):

  • accountId= 49941a4d857cf823ea748a9e
    Your TIMIFY account ID.
  • iscompanyExternalId= B-200AEH
    The external account/location ID.
  • enterpriseId= 57143a4d785cf823ea748c9d
    The ID of your enterprise account.
  • hideCloseButton= true
    Removes the widget's close button (top right).
  • fullscreen= true
    Opens the widget in full screen mode.
  • show services= 5cdab332987020107dad7d91,6fdag333927420107dad7p09
    Only shows the pre-defined services in the first step of the widget. Use the ID of the respective service. You can find this on the service details page. You can use multiple service IDs and separate them with commas.
  • hideServices= 5cdab332987020107dad7d91
    Hides the pre-defined services in the first step of the booking widget. Use the ID of the respective service. You can find this on the service details page. You can use multiple service IDs and separate them with a comma.
  • serviceId= 5cdab332987020107dad7d91
    Automatically selects the defined service.
  • courseId= 5ce945405a18a21079fb9690
    Automatically selects the defined group booking.
  • eventId= 5ce945405a18a21079fb9690
    Automatically selects the defined booking.
  • resourceId= 5c98a186e604f7102e633114
    Automatically selects the defined resource.
  • resourceExternalIds= ObjektXYZ
    Use the external ID of the resource to pre-select it in the booking widget.
  • showSelectedResourcesOnly= 5c98a186e604f7102e633114,4d54a186e604f710e633135
    Displays only the pre-defined resources in the booking widget.
  • filter resources= 5ce945405a18a21079fb9690,5c98a186e604f7102e633114
    Filters the resources in the booking widget and only shows the defined resource IDs.
  • filterResourcesbyExternalId= res1, res2, res3
    Uses the external resource ID to filter the resources in the booking widget.
  • date= 2019-09-16
    Filters a pre-defined day for the date selection.
  • daterange= 2019-09-16: 2019-09-21
    Filters a pre-defined period for the date selection.
  • disableOtherDates= true
    Deactivates all other days except for those defined using the parameter
  • disableOtherDates= range or disableOtherDates = date
    Deactivates a range of days or a specific day except for those defined using the parameter 
  • overlayColor= # 878253
    Changes the background colour of the overlay.
  • overlayOpacity = 0.5
    Changes the opacity of the background colour of the overlay.
  • show guest booking form = true
    Only the guest booking is displayed as the authentication method.
  • guestFirstName = Max
    Fills in the booker's first name automatically in the guest form.
  • guestLastName = Doe
    Fills in the booker's last name automatically in the guest form.
  • guestEmail=max@mustermann.de
    Fills in the e-mail of the booker in the guest form automatically.
  • guest phone= 89411471555
    Fills the phone number of the booker in the guest form.
  • guest phone country= en
    Fills in the country code of the phone number. of the booker in the guest form.
  • skipcustomerfieldsection= true
    If all the data on the form are pre-filled with parameters, the guest form is completely skipped and the booking confirmation page is displayed directly.
  • customerfield [ID]= VALUE
    Fills in all customer fields in the guest booking form. The ID of the customer field must be added in the area of the ID (you can copy this on the detail page of the customer field) and the value area contains the pre-filled value. One can pre-fill several customer-specific fields in this way by changing the number according to "data-customer-field-", e.g. customerField[5c922d36dccecb0e572ea410]=CocaCola for all text fields customerField[5c922d36dccecb0e572ea410]=1 for checkboxes
  • secret= eventId-secret
    In the event that you want to postpone an existing booking, you can trigger the postpone by transferring the event ID and event secret, e.g. data-secret = "5e1c4da96456f911e04bc18c-xx991882owks00921ms0923109381872m8dn3872nmds983kksiahdhd"
  • preReservationKey
    If you want to load a pre-reservation in the widget, enter the pre-reservation secret here.
  • locale= en-EN
    Automatically changes the default language setting of the booking widget.
  • customisation-id=5ce945405a18a21079fb9690
    Loads the customisation for the booking widget
  • templateCustomisationId=5ce945405a18a21079fb9690
    Sends the notifications to the individual email template after successful appointment booking / postponement.

-----------------------------------------------------------------------------------------------------------------------------

3. Customisation options using our REST API 

If you want to have an online booking experience that takes on board your corporate branding and specific booking workflows, this is for you. We go deep into your existing IT infrastructure, break down our widget, and re-build it so that it becomes a seamless extension of your API and interface. We take into account the needs and preferences or your clients, so that online booking becomes an integral part of your omni-channel experience.

This option involves accessing our developer platform, and a little bit of training with a dedicated technical specialist. To find out more, make a phone booking below and together we can build a unique booking widget for you!

Did this answer your question?