How do I customise my booking widget?

JRNI allows you to completely customise the appearance of the booking calendar (widget) on your own website so that you can offer a seamless customer booking experience.

To customise your widget, you need to visit Publish > Customise Widgets.

Choosing the size of your widget

JRNI 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 JRNI 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 JRNI 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 JRNI script and select update
  • Your JRNI 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 JRNI 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 JRNI does allow you to fully customise all CSS elements. For information on this please read our dedicated article.






Have more questions? Submit a request



Article is closed for comments.