BookingBug offers a variety of size options depending on where you would like to embed it on your calendar:

Large: At 730px by 570px this is the largest widget

Medium: 570px by 570px

Medium-Small: 440px by 570px

Wide: 730px by 240px

Small: 180px by 240px - the small widget should only be used for day-based businesses

One you select the size, you will see a preview of your widget at the bottom of the page so you can see what each one will look like.

Choosing the colours of your widget

You can now select what colour you would like each different element within your booking widget to be.

To change the colour of each part, simply click on the existing colour and drag the mouse to the colour you would like to use.

Alternatively, if you know the 6 character HEX code of the colour you wish to use, just type it into the coloured box.

In this section, you can also choose to have rounded or square corners on your widget.

Saving a colour palette

This is really important: if you edit any of the colours, we strongly recommend that you save a colour palette. This has several advantages, the main one being that once you have embedded it in your website, you can update the colours from your BookingBug account without ever having to change your website.

To save a colour palette, simply enter a name in the box (it can be anything) and hit Save.

Once you have saved it your colour changes will now show in the preview below. Everytime you make a change and save that palette again the preview will change.

You can create and save as many palettes as you wish and you can access them at any time by selecting Load.

Embedding in your site

If you do change the size of your widget, or have saved a palette, you must copy the script on the page (titled script to copy for adjustable palette widget). This will allow you to change the colours in the future and save that palette - this will then automatically update on your website.

In your website:

You now have the BookingBug script and you need to embed it in your website

Most website building toolkits including Moonfruit, Jimdo, 1&1 etc. will give you the option to add an HTML element or widget or simply custom HTML

Select this option, paste in your BookingBug script and select update

Your BookingBug booking calendar should now appear in your website

If your website doesn't allow this, we would recommend searching their help articles for 'custom HTML' or emailing their support to find out how to embed custom HTML

We know that getting BookingBug added to your website is a crucial step in the setup of your account and our support team are always on hand to offer any assistance you require - please don't hesitate to get in touch.

Advanced CSS customisation

If you are experienced on HTML and CSS customisation, then BookingBug does allow you to fully customise all CSS elements. For information on this please read our dedicated article.