How the Widget Customiser Works


What is a widget and what is a widget customiser?

A widget is an interface that allows a user, in this instance a guest, to perform a function/action or access a service, in this instance making a booking through a website. Our widget is what is referred to as “out of the box” which means it comes ready to use (see screenshot below):



This can then be styled using Cascading Style Sheets (CSS) so that it blends into your web page, maintaining the aesthetic.

This can only be done by someone with a solid knowledge of CSS, so often requires the help of someone external from the business such as a web designer.

Our widget customiser is an extra/chargeable piece of functionality that Zonal offer that allows customers to style and change the widget without the need for any CSS, and all within the Events Admin platform. This allows you to change the colouring, font, and wording (on some of the sections), toggle certain options and descriptors on or off depending on your needs, and a lot more.

Below is a simple before and after as point of comparison before we get into the detail:



How to use the customiser

Once the customiser has been enabled by your account manager, it will appear as a tab under the Widget section of Events Admin.

Select Add widget template and you can start customising your own widget. The only requirement of a template is a name; all other features (colour changes, toggling descriptors etc.) are up to the user.

Below, we’ll break these down by tab so that you can jump to the relevant section(s):



To apply your styling, ensure the template you’re using is saved and then click on the Copy button next to one of the Styling URL buttons (located on the homepage as well as each tab within the template):



Overall Look

On this page you are able make changes in relation to the general theme and appearance of your widget. The following are editable, with a description of what they affect.

  • Header Text: This displays at the top of the page throughout the booking journey and you can choose if you wish this to display or not and if so, edit the text (the default is “BOOK AN EVENT”).

  • Font/Text colour: There are 20 fonts to choose from, this affects all text within the booking journey. The text colour affects all except the main button text.

  • Background colour: This changes the colour behind the Occasion and Personalisation cards (all of the page aside from the upper sixth).

  • Main Button colour/Main Button Text colour: Affects all “Select” buttons, as well as the Change button at the top of the journey summary.

  • Header & Footer Background colour: The top banner of the page, where the Header Text will sit (if being used) as well as the footer that appears throughout the journey.

  • Occasion Card colour: The body of the Occasion Card, aside from the Select button.

  • Personalisation Card colour: Includes the Guest number card, Menus, Bookable Areas and Extras.

  • Summary Header Background colour: The colour of the growing display of selection options below the header and above the selection boxes during the booking journey.



Outlet

  • Header Text: If using a dropdown of all sites (either within the Estate or Company), you can select if you wish any text to display (the default is “Where do you wish to have your event?”) and also edit that text

  • Outlet Placeholder: The text that appears in the space your selected venue will sit; this is customisable



Occasion

  • Header Text: On the Occasion selection page, you can toggle on/off and edit the text that sits above the Occasions (note: this will always add the site name at the end, so the default is “Choose an occasion at”)

  • Assign an Occasion: As the name suggests, you can select which Occasions will appear on this widget here from a dropdown of all Occasions (note: any in italics aren’t configured to show in the widget channel but will do if selected). This functionality allows for bespoke widgets to be created for VIP guests, one-off events and many other reasons.



Covers

  • Header Text: This sits above the guests/covers selection box and can be toggled on/off as well as customised

  • Adult Card Placeholder: This text is editable; it will default to Adults but if you’d like to combine adults and child guests, you can change this to be all inclusive

  • Adult Description Text: This is customisable and can be toggled on/off as you prefer (note: the default is “16 years+”)

  • Display Child Covers/Child Card Placeholder: This will default to Children if turned on (it can be toggled off) and the text can also be changed

  • Children Description Text: This will only appear if the Display Child Covers box is toggled on and can be customised (note: the default is “2-16 years”)



Date and Time

  • Header Text: This sits above the date & time selection boxes and can be toggled on/off as well as customised

  • Date Range: Turn the ability to search across a range of dates on or off



Personalisation

  • Header Text: Toggling “Display” gives you the option to advise guests can name their event, whilst toggling the “Display Event Title” turns on or off the actual event naming facility

  • Area/Menu/Extras Header Text: All of these give you the option to turn on a header for the relevant section and to also customise the phrasing



Booking Requirements

  • Header Text/Summary Header Text/Summary Text: These can all be toggled on or off and customised to your choice of wording


This page will only show when a cost is due, such as a deposit, card guarantee (which will show as £0.00) or extras have been selected



Personal Details

  • Header Text: You can choose to display (or not) customisable text above the section where a guest has to enter their contact details

  • Display Referral Sources/Referral Sources Placeholder: If you use our “Booking Sources” feature, you can select which of these can be selected by a guest, as well as edit the placeholder text on the drop-down



Summary

  • Event Details Text: Above the booking summary, you can toggle on/off and edit a header

  • Guest Portal Text: Above the link to the Guest Portal, you can include or not a header that gives the guest a pointer of where to go to access their booking

  • Guest Portal Link: The link for the Guest Portal is a fixed feature and you can amend the title should you wish