Skip to main content

Colors & Branding

Make the booking widget feel like a natural part of your website: set your brand colors, then pick the font, button shape, card style and background your site uses.

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. On the Widget settings tab, find the Your brand 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. That's it - every change saves automatically, so there's no Save button to click.

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.

Logo Size​

Your logo appears in the top-left of the widget header. You can choose how large it shows:

SizeBest for
SmallLong, wide logos that already fill the space
Medium (default)Most logos
LargeLogos that look a little lost in the header
Extra largeSquare or circular logos - these sit in a short header bar, so they read smaller than a wide logo and usually look best bumped up

To change it:

  1. Go to Settings > Booking widget.
  2. On the Widget settings tab, in the Your brand section, find Logo size.
  3. Pick the size that looks best - your change saves automatically.
  4. Open your widget to check the result - if a square logo still looks small, try the next size up.
Square logos

A square logo will always look smaller than a wide "banner" logo at the same setting, because the header is a short horizontal strip. Choose Large or Extra large to give it more presence.

Font, Buttons, Cards and Background​

Four more rows in Your brand match the rest of your website. Each one saves the moment you change it.

SettingChoicesStandard
FontThe same fonts your EquipDash website can useStandard
ButtonsRounded, Pill or SquareRounded
CardsShadow, Outline or FlatShadow
BackgroundAny color, light or darkWhite
  1. Go to Settings > Booking widget.
  2. On the Widget settings tab, in Your brand, pick a Font from the list.
  3. Click Rounded, Pill or Square next to Buttons.
  4. Click Shadow, Outline or Flat next to Cards.
  5. Click the Background swatch, or type a color code such as #1A2B3C.

Your brand section with the Font, Buttons, Cards and Background rows

The look reaches every page customers see: your listings, item pages, the cart, checkout and the card payment fields, gift cards, passes, collections, and the single-item and card-row embeds on your own site.

The booking page with a pill button, outline cards and a dark background

Dark backgrounds​

A dark background works too. Text, prices, menus, date pickers and the card payment fields switch to light colors so everything stays easy to read. Your brand color stays on the buttons. If it is too close to the background to see, the buttons get a thin outline in a lighter shade of it.

Checkout on a dark background, with the card fields in the same colors

note

Your emails keep their own look. These settings change the booking pages only.

Match My Website​

To have your bookings take the font and main color of the page they sit on, go to Settings > Booking widget > Advanced settings and open Match my website. Switch it on. It applies to every EquipDash code on your website, including the pop-up. It only applies on your website: a customer who opens your booking page directly sees your own brand colors.

Under it, Extra CSS is for a web designer who wants to fine-tune the look. Imports, links to other websites and scripts are removed. Leave it empty if you are not sure.

Match my website switched on, with the Extra CSS box under it

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 your widget background
  • 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
  • On a white or light background, use a dark text color. On a dark background the widget picks light text for you

Previewing Your Changes​

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

  1. Open the Embed options tab.
  2. A live Preview of the widget shows under each embed type (Full widget embed, Single product, "Book now" button, Share a link). It reloads with your latest font, buttons, cards and background.
  3. Check that buttons, links, and text all look right in the preview.
  4. You can also open the Share a link embed type and visit that link 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
  • Font, buttons, cards and background match your website
  • The widget does not clash with the surrounding page when embedded on your site
  • Buttons and links are clearly visible and easy to read
  • The widget looks good on mobile