Skip to main content

Colors & Branding

Make the booking widget feel like a natural part of your website by matching it to your brand colors. The widget uses two configurable colors that control the appearance of buttons, links, accents, and body text.

The Two Color Settings​

SettingWhat It ControlsDefault
Primary ColorButtons, links, active states, accents, and highlights#0d3b66 (dark blue)
Text ColorBody text, labels, and descriptions#303233 (dark gray)

These two colors are all you need to give the widget a polished, on-brand look.

Changing Your Colors​

  1. Go to Settings > Booking widget.
  2. Find the Widget colors section.
  3. Click the Primary Color swatch to open the color picker, or type a hex code directly into the text field (e.g., #FF6B35).
  4. Set the Text Color the same way — click the swatch or type a hex code.
  5. Click Update.

The Default settings section showing Widget colors with Primary Color and Text Color pickers

The changes take effect immediately. Any customer visiting your widget after the save will see the updated colors.

Choosing Good Colors​

Primary Color​

Your primary color should be your brand's main accent color — the same one you use for buttons and call-to-action elements on your website. This keeps the widget visually consistent with the rest of your site.

Tips:

  • Use a color with good contrast against a white background, since the widget has a white/light base
  • Avoid very light colors (like pale yellow or light gray) for the primary color, as buttons and links may be hard to see
  • Test the color on both desktop and mobile to make sure it looks good at different screen sizes

Text Color​

The default dark gray (#303233) works well for most websites. Only change this if your site uses a different standard text color.

Tips:

  • Stick to dark colors for readability
  • Avoid pure black (#000000) if your website uses a softer dark tone
  • Never use a light color for text on the white widget background

Previewing Your Changes​

After saving your colors, you can preview them instantly on the same page.

  1. Scroll down to the Embed options section.
  2. A live Preview of the widget is embedded at the bottom of each tab (Rentals, Experiences, Store).
  3. Check that buttons, links, and text all look right in the preview.
  4. You can also open the Direct Link (Option B) in a new browser tab to see the full widget.

Brand Consistency Checklist​

Use this checklist to make sure your widget matches your website:

  • Primary color matches your website's main button/accent color
  • Text color matches your website's body text color
  • The widget does not clash with the surrounding page when embedded in an iframe
  • Buttons and links are clearly visible and easy to read
  • The widget looks good on mobile