Here’s what you need to know

  • The TIMIFY booking widget works in the following web browsers: Internet Explorer, 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 easiest option to go for, is the booking button/overlay option.
  • We'll point you in the right direction on how to embed the widget if you're using a CMS.
  • Once you install your widget, if you want to make further customizations - say change the colour of your widget overlay, pre-select a resource, or pre-fill customer details - check out 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.

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 Booking setup -> Integration -> and select Booking button from the tab.


STEP 2:

Choose where you want your button to appear.

  • If you go for a fixed position, your button will always appear mid-way 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 to booking button to appear. You need to understand some html to know where to add this code!

STEP 3:

For the fixed booking button: 

  • open the HTML file of the webpage you want the booking widget to appear on. To do this: right-click on your website. A menu appears: click on the item that allows you to view the source; in Internet Explorer, the menu item is “View Source”; in Mozilla Firefox and Chrome, the menu item is “View Page Source.” 
  • Find the "body" tag. Now paste the code you copied for the booking button just before the "body" tag. 


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.
  • 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.

For this option, you need to feel comfortable using basic html - or have someone with experience help you out. 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 Booking setup -> Integration -> and select Booking widget from the 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. 


STEP 2:
Review the booking widget settings. There are three optional customisations you can do select here. Select which ones you want.

STEP 3:
Now you have a choice: to generate a booking button script or an iFrame url. Select generate iframe url. A script will be auto-generated for you - copy it.

In full, your script should read something like this:
https://book.timify.com/services?accountId=5c98a186e604f7102e633108 "width =" 100% ">

STEP 4:

  • 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. 

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

What if you're using a CMS?

Most website building toolkits give you the option to add an HTML element or to customise your HTML. In addition, we've written guides for a number of CMS, accessible via Booking setup -> Integration -> 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 change the colour of your widget overlay, pre-fill customer details, and other customisations.

Did this answer your question?