This article details customizing the look and feel of your web booking widget to match your brand identity. All styling options reside within the Settings > Styles tab of your admin panel.

Customizing the Appearance:

The Styles tab offers a variety of options to personalize your booking widget:

  • Background Color: Set default and active background colors. This allows the background to change on hover or selection, creating a visual cue for users. For instance, you could use a light blue background color for the default state and a slightly darker blue for the active state (when hovering over the widget).
  • Border Color: Define default and active colors for the borders surrounding the widget elements.
  • Text Color: Choose default and active text colors to ensure readability in different scenarios (e.g., normal state vs. highlighted). It's important to consider color contrast for accessibility. There are online tools available to check color contrast ratios.
  • Border Radius: Adjust the curvature of the widget's corners for a more modern or traditional look.

Advanced Customization with Custom CSS (Optional):

The Styles tab also allows for adding custom CSS styling for even greater control over the widget's appearance. CSS stands for Cascading Style Sheets and is a language used to define the visual presentation of web pages.

Important: Implementing custom CSS incorrectly can potentially disrupt the functionality of your booking widget. It's crucial to thoroughly test any changes you make before publishing them to your live website.

For Users Comfortable with CSS:

If you're familiar with CSS and want to further customize the widget, follow these steps:

  1. Navigate to Settings > Styles > Web Booking (Buttons and Links) > Custom CSS tab.
  2. Paste your desired CSS code in the provided area.
  3. Save the settings and reload the booking widget to see the changes.

For Users Unfamiliar with CSS:

If you're not comfortable with CSS, consider seeking help from a web developer or searching online resources for guidance on basic CSS techniques.

Save your changes and preview the updated widget on your website to ensure it aligns perfectly with your brand!