In this tutorial, you'll learn how to customise your booking widget to reflect your brand's colours and logo, making it a seamless part of your website. This will enhance your customer's booking experience by maintaining a consistent visual identity across all platforms.


Video Tutorial:




Step-By-Step Instructions:


Step 1: Accessing the Widget Editor

  1. Log in to your account on the booking platform.
  2. Navigate to the top of the page and select the 'Business' menu.
  3. Choose 'My Booking Widget' at the bottom of the menu.
  4. Once inside, click on 'Widget Editor'. This will open the editor where you can start customising.

Step 2: Uploading Your Logo

  1. In the Widget Editor, locate and click the 'Choose File' button for the Banner Image.
  2. Select your logo file from your computer.
  3. After selecting your file, remember to click 'Save' at the bottom of the page to ensure your logo is uploaded successfully. The logo will appear as the banner at the top of your widget.

Step 3: Setting Your Brand Colours

  1. Instead of manually picking colours that match your logo, use an online tool like a colour picker from an image to get precise colour codes (hex values).
  2. Visit a website such as 'Color Picker Online', upload your logo, and click on the logo to pick the colour you want to use. The website will provide you with a hex code.
  3. Copy the hex code and return to your widget editor. Paste this code into the appropriate field to set your brand's colour.

Step 4: Customising Widget Components

  1. Customise the appearance of various widget components, such as the progress bar, text colours, and button colours:
    • For the progress bar, you might choose a distinctive colour that stands out or matches your branding.
    • Select appropriate colours for the text indicating booking availability, using colour cues (e.g., green for availability, red for limited spots).
    • Set the primary button colour and a contrasting hover colour for when the cursor is placed over the button.

Step 5: Saving and Previewing Your Changes

  1. After making all your customisations, click 'Save Widget Style' at the bottom of the editor.
  2. To see how the widget looks to your customers, click 'See Widget Page'. This allows you to preview the widget with your logo and brand colours as they will appear on your website.

Step 6: Sharing Your Booking Widget

  1. To share your booking widget, navigate to your company settings and select 'Booking Links'.
  2. You have the option to share a direct link to the branded widget or a private booking link that takes customers to the main booking site but with your customised widget.
  3. For embedding the widget on your website, you will find full instructions at 'How to Embed Your Widget'.


Conclusion:

Customising your booking widget not only enhances your brand's visibility but also provides a cohesive and professional look to your booking process. With these steps, you can effectively integrate your brand into the booking experience, ensuring a familiar and comfortable environment for your customers.


For further assistance, remember to contact the support team as needed. Happy branding!