By the end of this guide, you'll have your widget styled in your colors, in your tone, on the right background — and you'll know which knobs are worth turning.
What you'll need
- A widget under Widgets (the one created during guided setup is fine)
- ~5 minutes
- Optional: the hex code of your brand's primary color
- Light or dark mode chosen deliberately, not by default
- A primary color that matches your site
- A background that fits the section you're embedding into
- The right number of months visible
Step 1: Open Type & styling
Sidebar → your property → Widgets → click the widget → scroll to Type & Styling (place widgets) or Service widget settings (service widgets).
The settings panel sits next to (or above) a live preview. Every change you make updates the preview instantly — no save-to-see.
Step 2: Mode
Light or Dark. That's it; there's no "auto / system preference" today.
- Light — pale background, dark text. The default. Pairs with a white or transparent background.
- Dark — dark background, light text. Pairs with a black or transparent background.
If you switch between light and dark, the background-color choice may auto-correct (e.g. white-on-dark becomes transparent) so the widget stays readable.
Step 3: Background color
Three choices:
| Option | When to pick it |
|---|---|
| Transparent | Embedding into a colored or branded section. The widget sits on whatever's behind it |
| White | Embedding on a neutral page. Available in light mode |
| Black | Embedding on a dark page. Available in dark mode |
Transparent is the safest default for most embeds.
Step 4: Primary color
The accent color used for selected dates, primary buttons, and links inside the widget.
Click the color swatch to open your browser's color picker, or type a hex code like #ff6b35 directly. Both stay in sync.
A few notes:
- The default is
#10b981— a soft green. - Both 3-digit (
#abc) and 6-digit (#aabbcc) hex codes work. - Invalid input falls back to black. If the swatch turns black after you typed something, the value didn't parse — try again.
- Text color auto-adjusts. Cabintale calculates the luminance of your primary color and picks black or white text on top so labels stay readable. You don't need to worry about white-text-on-yellow.
One quirk worth knowing. Picking a primary color very close to your background — bright white on a white background, for example — won't break anything, but selected dates may look like un-selected ones. Test the preview before saving.
Step 5: Months to show (place widgets only)
Choose 1, 2, or 3 months visible at once.
- 1 month — compact. Good for tight sidebars or mobile-first sites.
- 2 months — most common; lets guests pick a check-in this month and check-out next.
- 3 months — maximum visibility. Comfortable on a wide booking page.
Mobile devices stack the columns vertically regardless of the setting, so 3 doesn't look bad on a phone — it just becomes a longer scroll.
Step 6: Show prices
Toggle whether nightly rates appear on the calendar (in tooltips and the pricing display).
Most owners leave this on. Common reasons to turn it off:
- A partner is embedding your widget on their site and quotes their own price.
- You don't want price-shopping browsers to compare you on rate alone.
- You want a clean visual without numbers.
When prices are hidden, the calendar still shows availability — guests can still see what's open and what's not. They just don't see the rate until they pick dates.
Step 7: Service widget size (services only)
Service widgets have a size setting instead of months-to-show:
- Vertical — tall and narrow. Good for sidebars.
- Medium (680px) — the default. Balanced for booking pages.
- Full width — stretches to 100% of the container.
Step 8: Save
Click Save widget at the top. The widget cache invalidates immediately; refreshing the embed page on your site shows the new look within seconds.
What I left out
A few things you might expect that aren't here today:
- Custom fonts — the widget uses its own typeface; you can't pass in your own.
- Custom CSS — there's no escape hatch for arbitrary styles.
- Auto / system color mode — only fixed light or dark.
- Hide navigation arrows — they always show.
Tell us if any of those would actually help; we keep a list.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Hex input doesn't change the swatch | What you typed isn't valid hex (e.g. extra characters, non-hex letters) | Use the visual color picker, or type strict #rrggbb |
| Live preview is empty | The widget's place has no seasons or pricing yet | Set up seasonal pricing first — the preview needs prices to render |
| Background dropdown is missing my choice | Some background options are mode-specific (e.g. black background only in dark mode) | Switch mode first, then pick the background |
| Changes to the live widget don't appear after save | Browser cache on the guest's side | Hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) on the page where the widget is embedded |
| Selected-date highlight looks invisible | Primary color is very close to the background | Pick a more distinct primary color or change the background |
Related guides
- Embeddable widget — Embeddable booking widget
- Custom booking form — Custom booking form
- Multiple widget variations — Multiple widget variations