Skip to content
Bilberry Widget Docs

Theming the widgets

Theming the Widgets

Bilberry widgets can be customized to match your brand’s identity, ensuring a seamless and visually cohesive user experience. This guide highlights the most commonly used theme properties, their significance, and how to configure them effectively.

Quick Start: Essential Theme Properties

While Bilberry widgets support a wide range of customization options, most customers focus on the following key properties:

Primary and Secondary Colors

The primary and secondary colors define your brand’s main and accent tones for buttons and key elements.

window.BilberryCustomTheme = {
    primaryColor: '#ff0000',
    primaryColorContrast: '#ffffff',
    secondaryColor: '#00ff00',
    secondaryColorContrast: '#000000',
};
  • Primary Color: Used for main actions such as “Book Now” or “Proceed to Checkout.” This is the primary color your users will interact with.
  • Primary Color Contrast: The text color on primary elements, ensuring readability and WCAG compliance.
  • Secondary Color: Applied to supporting actions like “Back” or “Cancel.” It complements the primary color.
  • Secondary Color Contrast: The text color on secondary elements.

Checkout Header Colors

Customize the checkout header to align with your brand, ensuring consistency and trust during the payment process.

window.BilberryCustomTheme = {
    checkoutHeaderColor: '#222222',
    checkoutHeaderColorContrast: '#ffffff',
    checkoutHeaderPrimaryColor: '#ff0000',
};
  • Checkout Header Color: Background color of the checkout header.
  • Checkout Header Contrast: Text color displayed in the checkout header.
  • Checkout Header Primary Color: Highlight color for the active tab in the checkout process.

Lightest Grey

The lightest grey property defines the base grey tone used across widgets for subtle UI elements and backgrounds.

window.BilberryCustomTheme = {
    lightestGrey: '#f5f5f5',
};
  • Lightest Grey: A versatile shade that complements primary and secondary colors, providing balance to the UI. Darker shades are generated from this base color.

Font Family, Heading Fonts, and Body Font

Typography consistency ensures your widgets feel integrated with your website. To maintain a unified appearance, configure fonts for headings, body text, and default widget elements.

window.BilberryCustomTheme = {
    fontFamily: 'Arial, sans-serif',
    bodyFont: 'Arial, sans-serif',
    h1Font: 'Arial, sans-serif',
    h2Font: 'Arial, sans-serif',
    h3Font: 'Arial, sans-serif',
    h4Font: 'Arial, sans-serif',
    h5Font: 'Arial, sans-serif',
    h6Font: 'Arial, sans-serif',
};
  • Font Family: The default font used for all text in the widgets.
  • Body Font: Specifically applied to body text elements.
  • Heading Fonts (h1 through h6): Define the fonts for each heading level to avoid fallback to default fonts.

Booking Widget Colors

The booking widget is one of the most visible components, and its colors play a vital role in user engagement. Customize its appearance to reflect your brand.

window.BilberryCustomTheme = {
    bookingWidgetColor: '#ffffff',
    bookingWidgetPrimaryColor: '#ff0000',
    bookingWidgetInputColor: '#f5f5f5',
    bookingWidgetInputTextColor: '#333333',
};
  • Booking Widget Color: The background color of the booking widget.
  • Booking Widget Primary Color: Highlight color for important elements within the booking widget.
  • Booking Widget Input Color: Background color for input fields.
  • Booking Widget Input Text Color: Text color used within input fields.

Setting the Initial Theme

Add your theme configuration as a BilberryCustomTheme object on the window object before loading the widget scripts.

Example:

<script>
    window.BilberryCustomTheme = {
        primaryColor: '#ff0000',
        primaryColorContrast: '#ffffff',
        secondaryColor: '#00ff00',
        secondaryColorContrast: '#000000',
        checkoutHeaderColor: '#222222',
        checkoutHeaderColorContrast: '#ffffff',
        checkoutHeaderPrimaryColor: '#ff0000',
        lightestGrey: '#f5f5f5',
        fontFamily: 'Arial, sans-serif',
        bodyFont: 'Arial, sans-serif',
        h1Font: 'Arial, sans-serif',
        h2Font: 'Arial, sans-serif',
        h3Font: 'Arial, sans-serif',
        h4Font: 'Arial, sans-serif',
        h5Font: 'Arial, sans-serif',
        h6Font: 'Arial, sans-serif',
        bookingWidgetColor: '#ffffff',
        bookingWidgetPrimaryColor: '#ff0000',
        bookingWidgetInputColor: '#f5f5f5',
        bookingWidgetInputTextColor: '#333333',
        iconUrl: 'https://example.com/logo.png',
        fontSize: 14, // Recommended font size for readability and aesthetic balance
    };
</script>
<script type="module" src="https://bilberry-widgets.b-cdn.net/v4/main.js"></script>

Updating the Theme Dynamically

You can update the theme dynamically using the BilberryOverrideTheme function. This is particularly useful for overriding the theme on specific subpages while retaining the global configuration.

Example:

window.BilberryOverrideTheme({
    primaryColor: '#0000ff',
    secondaryColor: '#ffff00',
    bookingWidgetColor: '#f0f0f0',
});

Use Case:

  • Dynamic Updates: Ideal for platforms like WordPress, where changing the global configuration per page is impractical. This allows you to apply a unique theme for specific subpages without affecting the overall setup.

Notes:

  • Only the specified properties will be updated, while others retain their current values.
  • Call this function after the widgets are initialized.

Full List of Theme Properties

For a complete list of theme properties, including advanced options for headings, typography, padding, and breakpoints, visit the list of all theme properties.

Tips for a Polished Theme

  1. Consistent Colors: Ensure your primary, secondary, and grey tones complement each other.
  2. Readable Fonts: Use a font size that balances aesthetics and readability. A font size around 14px is ideal for clarity without overwhelming the design.
  3. Testing: Test your theme across devices and screen sizes to ensure visual consistency.
  4. Accessibility: Verify that your colors meet WCAG standards for contrast, especially for text on primary and secondary elements.

By focusing on these essential properties, you can create a visually cohesive and branded experience while maintaining flexibility for further customization.