Create and Customise Online Booking Interfaces

Through Qudini, you can create an online booking interface quickly and easily, so as to give customers the ability to make an appointment booking at a specific venue, via your website or social media. 

Appointment bookings can be used in conjunction with your queue management system, for example, walk­-in customers can be managed alongside your appointment bookings.

To create and customise an online booking interface to match your branding, go to Merchant > Customisations > Online Booking Interface

Booking Widget Templates

This section shows the online booking interfaces already set up within your account. The URL link goes to the store finder page of the online journey.

Store Booking Links

This section shows the links to individual venues that have been enabled through the online booking interface. For example, if you create an online booking interface and enable all of your venues for it, then each venue’s direct URL will show on this list - it will bypass the store finder part of the journey.

Create / Edit an Online Booking Interface

  • To create an online booking interface click 'New Booking Widget Template' underneath the Booking Widget Templates section, or to edit and customise existing interfaces, click 'Edit' next to the relevant template.
  • On the right side, next to the preview window, you can configure and customise the main settings of your online booking interface.
  1. Widget Title - This allows you to identify this interface within the list of interfaces on the previous page.

  2. Your Homepage URL - When a customer has made their appointment booking using your online booking interface, they will end on a booking confirmation page. Here there is a ‘Back to homepage’ button. The URL you insert here will be linked to that button. Typically this is used to link back to your organisation’s homepage.

  3. Store Finder Link - This is generated automatically when you save a widget. This is not editable.

  4. Select Stores - Select the venues that the customer can choose from when they use this online booking interface.

  5. Select Products - Select the products that the customer can choose from when they use this online booking interface. These are the Merchant products set up in the Products section. Learn more here.
    You can only choose Products that have Audience: Booking enabled within their product settings.

Advanced Settings

  • Customers can create booking no less than (x) minutes in advance - This sets a restriction on how close to the current time a customer can make an appointment booking. This is used to prevent customers from making an appointment booking that starts too soon, therefore not allowing the venue enough time to prepare.

  • Customers can create booking no more than (x) weeks in advance - This sets a restriction on how far in advance a customer can make an appointment booking.

  • Set Default Date - This setting will allow you to hide a set number of upcoming dates on the online booking interface. For example, if I wanted to remove the next two days from the Date Selector page visible to customers, I would set the default date two days ahead of today’s date. This enables you to hide dates that would otherwise appear with no availability on the online booking interface, as per the image below.

  • Online booking slots start every - Select the frequency of your appointment booking slots. For example, if you select 15 minutes, the customer will have the choice of booking an appointment between 10am and 11am at 10:00, 10:15, 10:30, 10:45.

  • Select Line Address - Select which lines of your venue’s address you wish to show on the online booking interface. The venue’s address is recorded in Venue Details.

  • Default Location Settings - If the customer’s browser has declined to share its location, this default location will be used initially in the store finder.

  • Cookie Policy and Link - Enabling this will create a pop-up on the online booking interface which can be linked to a specific cookie policy URL.

  • Privacy Policy and Link - Enabling this will show a link on the online booking interface which will show the customer the privacy policy that your appointment bookings fall under.


  • Show time till next booking on store finder - Coming soon. Enabling this will show the next available slot for each venue on the store finder list.

  • Do not show product page if only one product - If there is only one service or product that customers can select for an appointment booking, you may wish to remove the Select Service page. Enable this to go straight from the store finder page to the appointment Date Selector page.

  • Show staff selector page - Coming soon. Enabling this allows customers to see a list of staff within the venue and make an appointment booking with a specific staff member.

  • Show booking confirmation w/ icons - Enabling this displays your product icons on the service selection page within your online booking interface.

  • Show staff profile on confirmation page if staff member automatically assigned. If you have enabled the ability for staff members to create a profile of themselves in the Venue Details, by enabling this feature the customer can see a brief overview of what the staff member specialises in when making their appointment booking.

  • Show staff selection dropdown on calendar page - Enabling this creates a drop-down menu for the customer to select a staff member, which then updates the appointment date and time options they can choose from, according to that staff member's availability.

  • Place store finder URL instead of Qudini store selector tool - Enabling this allows you to link the online booking interface with your organisation’s store finder tool. This allows customers to go back to your store finder tool, instead of the Qudini store finder tool, if they wish to select another store.
    If enabled, you must input your own URL and a name for the button. The name you input here will be shown on the button. If no name is provided, this will display “Other Stores” by default.

Mandatory customer details fields

When the customer has selected their appointment slot, they are asked to fill in their details in order to confirm their appointment booking. By switching these options on, these become mandatory fields for the customer to fill in. Enabling first name and email address is advised as a minimum.

Other settings

  • Questions - Enabling this means that any Customer Questions (Learn more here) created for Booking customers ‘When joining’ will appear on the Enter Details page (when the customer is asked to enter their contact information).

  • SMS Optional - Enabling this gives the customer the option to receive SMS communications about their appointment. Enabling this will give the customer the option to receive SMS communications as the point of submitting their details on the Customer Details page. If the customer does not tick this option, then they will not receive SMS communications. For example, the confirmation SMS, or reminder SMS, if you have set these up in the SMS Settings.
    If this option is disabled and SMS Settings are configured for appointment booking customers, then by default, customers will receive SMS communications if they provide their mobile phone number when completing a booking.

  • Require Captcha - To ensure that your customers are not robots, you can enable Captcha.

Attribution Question - Not supported for Booking Widget v2

  • Show attribution question - Coming soon. At the end of making an appointment booking, the customer will be asked to select an option from a customisable dropdown list saying how they had discovered the organisation's appointment booking service.

After making any changes, remember to click 'Save' in the top-right of the page.

Customise your Online Booking Interface

Once you have created and configured your online booking interface, you can customise the look and feel of it to suit your brand.

At the bottom of the setting, you can switch from Widget Settings to Customise.

Pressing 'Save' in the top-right corner will update the preview window on the left to reflect your latest customisations.

  • Load style template - If you have created a Style Template, you can select it here. This will pre-populate your colours and branding.
  • Logo - Choose a logo to upload (file format: PNG, JPEG, PNG).

  • Colours - To change the colours of headers, backgrounds, font and buttons, use a hex colour code. Clicking on the hex colour text field will open a colour chart that you can select from instead if you do not have an exact hex colour code to use.

  • Font - Select a font from the drop-down list.


Once you have set up and saved your online booking widget, you can set up other languages too. Click 'Add/Remove' underneath the preview window in the Text Languages section.

  1. Enable a language by ticking the square checkbox.

  2. Enable the circular Default checkbox if you would like this language to be the default.

  3. Once the languages are selected, click 'Save'.

  4. Back on the main screen, click on the flag in the Text Languages section, and input the translation for each field.
    By adding a translation, this means you can also change the field’s text, allowing you greater flexibility with how you communicate with customers. For example, instead of ‘Last name’, you could change this to ‘Surname’.

Customers can change the language for their appointment by clicking on the language drop-down on the online booking interface.

You can test your online booking interface by clicking 'Back' and clicking the 'Link' button next to it.

Did you find it helpful? Yes No