Modern Web Theme

Modern Web Theme

Super Admins and Admins can view and customize Booking Page Themes. Managers can only view this information. Staff will not have access to this information. This feature is available to all users.

Modern Web Theme is one of the available Booking Page Themes that help design and customize booking pages to align with your business branding. It also personalizes your booking page and gives the required edge for your business.

Accessing Modern Web Theme

  1. Click Manage Business  icon in the menu bar on the top right, then click Workspaces.


  2. Choose the required workspace. Basic Information tab is selected by default. Click Booking Page Themes and select Modern Web Theme.



Color Options

Modern Web Theme provides a variety of color options to choose from. You can pick a color and view its corresponding preview to its right.



You can click anywhere on the preview to see changes made to your booking page live.



This is how the booking page will look for the selected color option.



Custom Color Palette

The Custom Color Palette offers a gamut of colors to choose from, to customize your booking pages. It gives your booking page the visual appeal that it needs and provides a professional touch to your business. Custom colours help you align your booking page with that of your business giving your users a seamless brand experience.
Custom Color Palette is right now available only with the Modern Web Theme.
  1. Click the last tile available under Color Options.



  2. A pop up comes up with personalization options.

     

Booking Page Elements

  • Background Color: The color of the canvas on which the various booking page elements (business text, controls and appointment booking button) are put up.
  • Text Color: The color of the business text (except that of the appointment booking button).
  • Button Color: The color of the appointment booking button (and also of icons of the other controls in the booking page).

  • Button Text Color: The color of the text contained in the appointment booking button.

Customize component color



The color of the various components mentioned below can either be customized using the sliders to the right of the color palette or using  hex codes in the box provided below the color palette.

Sliders: Sliding over the colour spectrum to the right of the color palette, enables you arbitrarily choose from a wide collection of colors.

Color HEX:  Every color in the colour palette is assigned a unique hex code. The HEX box allows keying in hex codes to choose a desired color. It also provides hex values for colors chosen by you so that you can reuse the same codes uniformly in your scheduling pages.
It is possible to customize the various components of your Booking Page - Title, Description, Background image and Button Text.

Set a Title

You can edit the title to go with the intent of the Booking Page.
Info: The Title field can be hidden from view in the Booking Page by clicking the eye icon to its left.
  1. Click the edit icon against the Title field.



  2. Enter the required text and click Save.



Set a Description

You can edit the description to go with its intent of the Booking Page.
Info: The Description field can be hidden from view in the Booking Page by clicking the eye icon to its left.
  1. Click the edit icon against the Description field.



  2. Enter the required text and click Save.



Set a Background Image

You can set a background image to go with the intent of the Booking Page.
Info: The Background Image can be hidden from view in the Booking Page by clicking the eye icon to its left.
Note: It requires the background image to have a resolution in the range of 1440*798px
  1. Click the upload icon  to choose a background image for the booking page.



  2. A pop up appears allowing you to set the transparency of the selected background image. Choose a desired transparency and click Apply.



    Note: You can always change the selected background image by clicking Change before applying the changes.

    The GIF below illustrates how the transparency can be set for the background image.



  3. The background image for the Booking Page is now set. You can hover over the background image and either edit (change) or delete (remove) it.


Set the Button text

You can customize the text for the appointment booking button.
  1. Click the edit icon against the Button Text field.



  2. Enter the required text and click Save.