Here’s what you need to know

• The TIMIFY booking widget works in the following web browsers: Edge, Firefox, Safari, and Chrome. We also have plugins for many Content Management Systems (CMS), including Joomla, Word Press, and Drupal.

• When it comes to embedding a widget to your website, you have two options: to add the widget as an overlay - triggered by a booking button - or as an iFrame. The difference lies in how they display on your website. We explain more below, so you can decide which is right for you.

• We provide instructions and tips for both options. The simplest option to go for, is the booking button/overlay option, as there is less coding involved.

• We'll point you in the right direction on how to embed the widget if you're using a CMS.

• You can customise your widget further using code we have prepared for you, available in our advanced article, here.

How this article is structured:

1. What's the difference between using a booking button and overlay vs. an iFrame for my booking widget?

2. How to embed the booking widget as an overlay

3. How to embed the booking widget as an iFrame.

4. CMS - WordPress, Joomla, or Drupal

1. What's the difference between using a booking button and overlay vs. an iFrame for my booking widget?

• Booking button + overlay:

As the name suggests, a widget overlay will sit over the centre of your website, covering your content. It only appears when the user clicks on your booking button. An overlay is quick and easy to install. Want to know how a website looks using the standard booking button and overlay option? This is how a website looks with the booking button…

…and here's what happens when the user clicks on the booking button:

• The booking widget as an iFrame

Short for inline frame, an iFrame is simply a frame within a frame. If you go for this option, your booking widget displays automatically when a visitor opens your website: there is no need for you to have a booking button. An iFrame offers you more customisation options, and for that reason, takes a little longer to set up. You also need to understand a bit about HTML in order to know where to place the widget on your website. The user can't miss your booking widget if you add it as an iFrame. This is how it looks on a website:

Decide which option you want, and read on for installation instructions. As part of the integration process, you may need to provide your TIMIFY account ID. You can find this under Account Details:

2. How to embed the booking widget as an overlay

Log into your TIMIFY account and have your website open. You’ll need to copy-paste a few lines of code to your website HTML.

STEP 1:

Go to Integration → Booking Widget. Select the Booking Button/Overlay tab.

STEP 2:

Choose where you want your button to appear.

• If you go for a fixed position, your button will always appear midway down your screen, on the left or right. It will stay fixed in this position - on every page of your website - regardless of whether you scroll up or down. You'll have just one snippet of code to copy-paste in your HTML - the booking button itself.

• If you select a flexible button position, you have complete freedom on where to place your button. You'll have an additional snippet of code to add to your HTML: to determine where you want the booking button to appear.

• You have a number of further settings to play around with, from your preferred default widget language, to whether you want a service and/or resource to be pre-selected.

STEP 3:

For the fixed booking button: 

• Open the HTML file of the webpage, or find in the admin panel of your website where it's possible to add HTML code.

• Scroll and find the "</head>" tag. Now, paste the code you copied just before the "</head>" tag. See the screenshots for before and after:

• Before:

• After:

For the flexible button position:

• Open the HTML file of the webpage you want the booking widget to appear on.

• Find the "body" tag. Now paste the code you copied for the booking button just before the "body" tag. 

• Now you need to add the second snippet of code. Locate where in your HTML you want the booking button to appear - that's up to you.

• Add a class "timify-button" for the element that the snippet refers to.

• Add the attribute "data-account-id =" and insert your unique TIMIFY booking ID within the “”. (See above for how to access your TIMIFY booking ID)

That's it! Click re-fresh and the widget should appear on your site.

3. How to embed the booking widget as an iFrame.

Log into your TIMIFY account and have your website open. You’ll need to copy-paste a few lines of code to your website HTML. 

STEP 1:

Go to Integration → Booking widget. Select the Booking Widget tab. To embed an iFrame, you don't need a booking button to trigger your widget to open: it will auto-open when a visitor opens your website. 

• You have a number of settings to play around with, from your preferred default widget language, to whether you want a service and/or resource to be pre-selected. The choices you make affect the code that gets generated.

STEP 2:

Copy-paste the below URL in the HTML page of your webpage where you want the iFrame to appear

STEP 3:

• Open the HTML of the page you want the booking widget to appear on, and go to the location where you want to embed the widget. Paste the code snippet you copied here.

• Adjust the URL in the "src" attribute: add your unique TIMIFY booking ID within the “”. (See above for how to access your TIMIFY booking ID).

• To edit the height and width of the widget, change the values of the parameters ("height" or "width") using the auto-generated script code.

That's it! Click re-fresh and the widget should appear on your site. 

4. CMS - WordPress, Joomla or Drupal

Most website building toolkits give you the option to add an HTML element or to customise your HTML. You can get this HTML by following the steps above for either the overlay or iFrame option.

In addition, we've written guides for a number of CMS, accessible via Integration → Booking Widget → and the CMS tab. 

If your website provider or CMS doesn't allow you to access the script, we recommend searching their help articles for 'custom HTML' or contacting their support team to find out how to embed custom HTML.

Maybe you want to step up your booking experience a notch or two. Customise your TIMIFY booking widget: advanced settings shows you how to pre-fill customer details and other customisations.