Styling with custom CSS

Your widget can be styled to match your website - colours, fonts, corners, shadows and every individual element. You do this in the Custom CSS box of the widget designer, under Settings → Marketing → Widgets.

Everything you put in that box:

• only affects your widget - it is automatically scoped to the widget, so it can never leak out and change the rest of your website;
• overrides the widget’s built-in styles, so you are always in control (you never need !important);
• takes effect as soon as you save (the live preview beside the box updates instantly).

There are two levels of control:

1. Theme tokens - change a handful of named colours and sizes to re-theme the whole widget at once. Start here; it covers most needs in a few lines.
2. Element classes - target any specific part of any widget by its class, for complete control. The full reference is below.

Theme tokens (start here)

The widget is built on a set of tokens (named colours, fonts and sizes). Change a token and every part of the widget that uses it updates at once.

:root {
  --accent: #e91e63;   /* your brand colour */
  --bg:     #ffffff;   /* widget background */
  --text:   #1a1a1a;   /* main text colour */
}

That is a complete re-theme in three lines. The full set is grouped below. It is deliberately broad, so a token change can make the widget look structurally different (its type, spacing rhythm, depth and control shape), not just recoloured. Set only the tokens you care about; the rest keep their defaults.

Colour

Token	Controls	Default
--accent	Brand / primary colour (buttons, highlights, focus)	#c0a060
--accent-fg	Text/icon colour on top of the accent (e.g. a button label)	#ffffff
--accent-bg	Subtle accent tint (soft highlight backgrounds)	13% of --accent
--text	Main text colour	#2b2f33
--muted	Secondary / helper text	#8b8579

Type

--wdg-font-display is the biggest single lever: give your headings a distinct display face and the whole widget stops looking like a default form. See Fonts below for loading a web font.

Token	Controls	Default
--wdg-font	Body typeface	system font
--wdg-font-display	Heading / display typeface (set a distinct face here)	same as --wdg-font
--fw-body	Body text weight	400
--tracking	Heading letter-spacing	0
--leading	Body line-height	normal
--fs-display	Largest heading (plain venue name)	26px
--fs-hero	Hero / info-card / splash name	24px
--fs-heading	Card heading	22px
--fs-title	Section / venue name	20px
--fs-card-h	Card and detail sub-headings	18px
--fs-sub	Sub-headings, prices, buttons	16px
--fs-body	Body copy and inputs	14px
--fs-label	Field labels and meta	13px
--fs-fine	Hints and fine print	12px

Spacing and density (airy or tight)

Token	Controls	Default
--space	Base spacing unit	16px
--card-pad	Padding inside the main card / panel	22px
--gap	Gap between grid / list items	12px
--section-gap	Gap between stacked cards / sections	14px

Surfaces and depth

Token	Controls	Default
--bg	Page / widget background	#faf8f2
--bg-image	Optional page gradient or image (pair with a matching --bg)	none
--card	Card / panel surface	#ffffff
--card-2	Quieter secondary surface (footer cards)	rgba(255,255,255,.5)
--field-bg	Input and control background	#ffffff
--line	Borders and dividers	#e7e1d2
--radius	Corner rounding on cards and panels	14px
--radius-lg	Rounding on larger cards and sheets	16px
--radius-sm	Rounding on inputs and small controls	10px
--border-w	Base hairline border width	1px
--shadow / --elev-lg	Strong card shadow / elevation	0 8px 28px rgba(0,0,0,.14)
--elev-sm	Subtle elevation	0 4px 18px rgba(0,0,0,.06)

Controls (buttons and fields)

Token	Controls	Default
--btn-radius	Primary button corner rounding	11px
--btn-weight	Button label weight	600
--btn-pad	Primary button padding	14px
--field-radius	Input / select corner rounding	same as --radius-sm
--field-border	Input resting border	1px solid var(--line)
--focus-ring	Focus / selected accent	same as --accent

Font token names

--font and --font-display are internal aliases of --wdg-font and --wdg-font-display. Setting either name works, so use whichever you prefer.

Dark theme in a few lines

Set a dark --bg and the widget derives a matching dark scheme automatically, adjusting --card, --line, --muted, --accent-bg, --card-2 and --field-bg for you, so the cards, fields and secondary surfaces all go dark together (no surface stays light on its own). You only need to set any of these yourself if you want a different value than the auto-derived one, as in the example below:

:root {
  --bg: #121212; --card: #1e1e1e; --card-2: #181818; --field-bg: #1e1e1e;
  --text: #f5f5f5; --muted: #9a9a9a; --line: #333333;
  --accent: #e91e63; --accent-fg: #ffffff;
}

Fonts

The body and heading faces are set with two tokens. Set --wdg-font for the body typeface, and --wdg-font-display for a distinct heading face (it defaults to your body font, so give it its own value to add real character):

:root {
  --wdg-font: 'Inter', -apple-system, sans-serif;
  --wdg-font-display: 'Fraunces', Georgia, serif;   /* headings only */
}

To load custom web fonts, add an @import (or an @font-face) first:

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap');
:root {
  --wdg-font: 'Inter', sans-serif;
  --wdg-font-display: 'Fraunces', serif;
}

Setting the font on body still works too (it flows down to the whole widget), which is handy for a single face everywhere:

body { font-family: 'Poppins', -apple-system, sans-serif; }

Responsive tweaks

Media queries work, so you can style differently on small screens:

@media (max-width: 480px) {
  :root { --radius: 8px; }
  .sd-card { padding: 14px; }
}

Full class reference

Every part of every widget has a class beginning sd- (or sdc- for the combo/chooser widget). Target any of them directly - you do not need to prefix anything, scoping is automatic. The tables below cover all widgets; you only need the sections for the widget types you use.

These nodes are rendered by JavaScript

The widget builds itself in the browser: every element below is drawn into the widget root (#sd-widget, with #sd-app inside it) as you move through the flow. Custom CSS restyles these nodes in place - colour, type, spacing, borders, size, show / hide with visibility. It cannot reorder them, add new ones, or move one part into another; the order and nesting are fixed by the widget. A handful of anchor points are IDs rather than classes (for example #sd-avail and #sd-find on the booking widget) - target those with the # selector.

Finding a class quickly

Right-click any element in the live preview (or your embedded widget), choose Inspect, and read its class. Anything starting sd-/sdc- is listed below.

Shared across every widget

Layout and header

Selector	Controls
.sd-shell	The widget’s outer wrapper (overall padding / max width)
.sd-hbar	The compact header bar (minimal style)
.sd-name, .sd-hbar-name	The venue name in the header
.sd-logo	The header logo
.sd-name-lg, .sd-addr	Large venue name + address (when the info card is off)
.sd-foot	The footer / “powered by” strip

Info card and hero (detailed style)

Selector	Controls
.sd-hero, .sd-herowrap, .sd-img-cover	The hero image and its frame
.sd-icard, .sd-icard--solo	The venue info card (with / without a hero)
.sd-ic-name	Venue name in the info card
.sd-ic-addr, .sd-ic-meta, .sd-ic-sub	Address, meta line, sub-text
.sd-ic-open, .sd-ic-shut	“Open now” / “Closed” status

Footer cards (location, contact, about, T&Cs)

Selector	Controls
.sd-dcard, .sd-dcard-body	A footer card and its body
.sd-dcard-h, .sd-dcard-hd, .sd-dcard-sub	Card heading, header row, sub-heading
.sd-dcaret	The expand/collapse caret
.sd-dchip, .sd-dchip-sm	Chips (e.g. cuisine, tags)
.sd-dloc, .sd-dloc-tx, .sd-dmap	Location block, its text, the embedded map
.sd-contact	The contact-details grid (hours / phone / cuisine)
.sd-dtandc	The terms-and-conditions card
.sd-social, .sd-socials	A social link and the social-links row

Forms, buttons and states

Selector	Controls
.sd-card	The main card / panel container
.sd-title, .sd-sub	A step’s title and subtitle
.sd-label, .sd-hint	Field labels and helper hints
.sd-input	Text inputs and text areas
.sd-btn	Buttons (primary actions)
.sd-back	The “back” link
.sd-err	Error messages
.sd-note	Inline notes
.sd-spinner	Loading spinner
.sd-success, .sd-tick	Success state and its tick
.sd-empty	Empty-state text
.sd-hidden	Utility - hides an element (avoid restyling)

Booking widget

Entry step - date / party / time tiles

The first screen lives in .sd-card and is a grid of tiles (.sd-stiles), one tile per choice - date, party and time. It is not a set of stepper rows, so there is no .sd-steprow; style the tiles below. Once a time is chosen the grid collapses (it gains .sd-collapsed).

Selector	Controls
.sd-stiles	The tile grid on the first screen (gains .sd-collapsed once a slot is picked)
.sd-stile	A single tile (date, party or time)
.sd-stile-ic	A tile’s icon
.sd-stile-lb	A tile’s label (“Date”, “Party”, “Time”)
.sd-stile-v, .sd-stile-val	The tile’s value text / value box
.sd-stile-chev	The tile’s chevron
.sd-time-wrap, .sd-time-part	The time tile’s value wrapper and its hour / minute parts

Finding and picking a time

Below the tiles, #sd-find runs the search and the results render into #sd-avail, which starts with a placeholder prompt.

Selector	Controls
#sd-find	The Find availability button (also carries .sd-btn)
#sd-avail	The container the available times render into
#sd-avail-empty, .sd-empty	The “pick a date, party and time” placeholder prompt
.sd-slots, .sd-slot	The slot grid and a single time-slot button
.sd-rule, .sd-glrule	An experience card (a bookable rule; .sd-glrule marks a guest-list rule)
.sd-rule-img, .sd-rule-title, .sd-rule-desc, .sd-rule-body	Its image, title, description, body
.sd-reassure	The reassurance line under the button (detailed style)

Area / option and table selection

Selector	Controls
.sd-tlist	The area / option list container
.sd-trow	A full-width area or option row; gains .on when it is the selected one
.sd-fp-wrap, .sd-fp-canvas	The floorplan frame and canvas
.sd-fp-table, .sd-fp-chair, .sd-fp-obj	Tables, chairs and other objects
.sd-fp-plabel, .sd-fp-spend	Table label and minimum-spend badge
.sd-fp-legend, .sd-fp-legkey, .sd-fp-swatch	The legend and its colour keys
.sd-fp-floorsel	The floor selector
.sd-fp-detail, .sd-fp-detail-x	The selected-table detail overlay + close

Add-ons / bundles

Selector	Controls
.sd-bundle, .sd-bitem	The bundles accordion and an item
.sd-bname, .sd-bunit, .sd-bthumb	Item name, unit price, thumbnail
.sd-bstep, .sd-bqty	The quantity stepper and its number
.sd-browtot, .sd-btotal	Per-row total and grand total
.sd-bchev	The accordion chevron

Summary and confirmation

Selector	Controls
.sd-sum, .sd-sum-body	The summary card and its body
.sd-sum-grid, .sd-sum-k, .sd-sum-v	The details grid, its keys and values
.sd-sum-img	The summary image
.sd-deposit	The deposit / hold line (holds a .lbl label and .amt amount)
.sd-policy, .sd-pol-list	Booking-policy text and bullet list
.sd-special	The special-request field
.sd-pm-select	The saved-card picker (logged-in buyers)

No availability, other dates / locations

Selector	Controls
.sd-noavail, .sd-noavail-t, .sd-noavail-sub, .sd-noavail-ic	The “no availability” empty state
.sd-noavail-more	Its “jump to next date” button
.sd-altdates, .sd-altdate	Alternative-date suggestions
.sd-acc, .sd-acc-body	Detailed-theme accordions (other locations / dates)
.sd-acc-sister, .sd-acc-sister-name, .sd-acc-times, .sd-acc-chip	Cross-venue recommendation (“our other venues”) rows, names, times, chips

Events widget

Search and filters

Selector	Controls
.sd-esearch, .sd-esearch-wrap	The event search box and its wrapper
.sd-efilter, .sd-efilter-btn, .sd-efilter-badge	The filter bar, button and count badge
.sd-fchips, .sd-fchip	Filter chips row and a single chip

Filter modal

Selector	Controls
.sd-modal, .sd-modal-sheet, .sd-modal-bd	The modal, its sheet and backdrop
.sd-modal-hd, .sd-modal-t, .sd-modal-x	Header, title, close button
.sd-modal-body, .sd-modal-ft	Body and footer

Event cards and tickets

Selector	Controls
.sd-elist, .sd-ecard	The event list and a single event card
.sd-ecard-img, .sd-ecard-name, .sd-ecard-desc, .sd-ecard-meta, .sd-ecard-body	Card image, name, description, meta, body
.sd-epill, .sd-epill-row	The type/genre pill over the image
.sd-tickets, .sd-tick-tile	The ticket list and a ticket-type tile
.sd-tick-name, .sd-tick-price, .sd-tick-desc, .sd-tick-rem, .sd-tick-ico	Ticket name, price, description, remaining count, icon
.sd-total	The order total line (holds a .lbl label and .amt amount)
.sd-loginhint	The “sign in for member pricing” hint

Vouchers widget

Selector	Controls
.sd-chips, .sd-chip	Preset-amount chips
.sd-qbtn, .sd-qty, .sd-qval	Quantity buttons, wrapper and value
.sd-radio	Delivery / option radio rows
.sd-vcode	The voucher-code field
.sd-total	The total line (holds a .lbl label and .amt amount)
.sd-return	The “back” / return link

Combo / chooser (splash) widget

The combo widget lets guests pick between booking types. Its classes begin sdc-.

Selector	Controls
.sdc-hero, .sdc-hbar, .sdc-hbar-name, .sdc-name, .sdc-h	Splash hero and header
.sdc-msg	The prompt message
.sdc-tiles, .sdc-tile	The chooser grid and a single option tile
.sdc-tile-ic, .sdc-tile-lb, .sdc-tile-ch	Tile icon, label and chevron
.sdc-detailed, .sdc-n1, .sdc-n2, .sdc-n3	Detailed layout + column count (1-3 flows)

Worked examples

A bold, modern brand (hot-pink accent, dark cards, rounded, custom font):

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap');

:root {
  --accent: #ff2d78; --accent-fg: #ffffff;
  --bg: #0e0e11; --card: #17171c; --field-bg: #17171c;
  --text: #f2f2f5; --muted: #9a9aa5; --line: #2a2a32;
  --radius: 18px; --radius-sm: 12px; --shadow: 0 12px 40px rgba(0,0,0,.45);
}
body { font-family: 'Sora', sans-serif; }
.sd-btn { border-radius: 999px; font-weight: 600; letter-spacing: .02em; }

Targeting specific elements - pill time-slots, a gradient primary button, and larger ticket prices:

.sd-slot       { border-radius: 999px; }
.sd-btn        { background: linear-gradient(90deg, #e91e63, #ff6f00); }
.sd-tick-price { font-size: 20px; font-weight: 700; color: var(--accent); }
.sd-icard      { box-shadow: none; border: 2px solid var(--accent); }

Going structural - a background gradient and a decorative accent bar. You can paint the whole page with --bg-image (set a matching --bg behind it), and you may add decorative ::before / ::after layers to #sd-widget, .sd-card, .sd-hbar and .sd-hero for touches like accent rules, gradients or a hero treatment:

:root {
  --bg: #0e0e11;
  --bg-image: radial-gradient(120% 80% at 50% 0%, #1a1030, #0e0e11);
  --card-pad: 28px; --section-gap: 20px;   /* a more airy, spacious rhythm */
}
.sd-card::before {
  content: ""; display: block; height: 3px; margin: -6px 0 16px;
  border-radius: 999px; background: linear-gradient(90deg, var(--accent), transparent);
}

Tips

• Start with tokens, then reach for .sd-* classes for specific parts.
• Your CSS always wins over the built-in styles - no !important needed.
• It cannot break your website - everything is confined to the widget.
• :root, html and body all refer to the widget itself here, which is how a :root { --accent: ... } override reaches every part of the widget.
• Test on mobile - the widget is often embedded on phones.

Your colours, fonts and logo also come from branding and the widget designer - custom CSS is for going further than those allow.