Customising a widget

The widget designer in Settings → Marketing → Widgets controls how your widgets look and what they say. You choose a design, edit its content, and the whole thing renders in the colours, fonts and logo from your branding. A live preview sits beside the designer so you see every change on the real widget as you make it.

Designs

Pick a design from the gallery. Each is a ready-made look, rendered in your own brand colours and fonts:

Design	Feel
Classic	The standard Sidedoor widget - clean and straight to booking.
Editorial	A magazine-style layout with generous type.
Immersive Hero	A full-bleed hero image with the booking flow over it.
Modern Hospitality	A warm, contemporary restaurant look.
Minimal Luxury	Pared-back and understated.
Playful & Bold	Big, bright and characterful.
Nightlife / Club	A dark, high-contrast look for late venues.
Classic Restaurant	A traditional dining layout.
Build your own	Start from a blank canvas and assemble the widget from blocks - see below.

Choosing a design in the gallery only previews it. To make it your live widget, click Save design. If you’re mid-change and want to go back, Discard returns you to the design you last saved.

Note

The preview has tabs across the top for each widget type - All-in-one, Table Reservations, Guest List, Events, Vouchers, Waitlist and Experiences - so you can see how your design looks in every flow before you save.

Editing content

Most designs let you edit their wording and images directly in the preview. Click a piece of text (like the headline or description) or an image and edit it in place:

• Text - change the wording, and style it with colour, size and font controls.
• Images - swap the hero or gallery images; empty image slots show an add image prompt.
• Social links - remove any you don’t want, right in the preview.

When you edit text or an image, an Apply to choice decides how far the change reaches:

Apply to	Effect
All flavours	The edit applies to every widget type at once.
This flavour only	The edit applies only to the widget type you’re previewing.

This lets you keep one shared message everywhere, or give (say) the Events widget its own headline. Text styling (colour, size, font) always applies across all widget types.

Click Save content when you’re happy. Content edits are saved against the design you’ve activated.

Build your own

The Build your own design is a blank canvas you assemble from blocks. Add the blocks you want from the palette and arrange them:

Block	Shows
Logo	Your branding logo.
Heading / Text	Your own copy.
Image	A picture you upload.
Button	A call-to-action link.
Section / hero	A full-width band, with its own background colour or image, that can hold other blocks inside it - for building a hero-style section.
Booking bar	The booking flow itself.
Information card	A summary card - hero photo, venue name, cuisine and whether you’re open now.
About	Your venue description.
Location map	An embedded map.
Contact details	Your opening hours, phone and cuisine.
Terms & conditions	Your terms.
Rating badge	Your review score.
Social icons	Links to your social profiles.
Events / Experiences	Live listings pulled from your account.
Custom HTML	Your own markup, for anything else.

Each block can be styled - alignment, colour, font, size, bold and italic. Blocks that pull live data (booking bar, events, information card) stay in step with your account automatically.

Building your own is a two-step save:

1. Save stores your layout as a draft without changing your live widget.
2. Save design then makes it the live widget - the same activation step as any other design.

The Classic design’s content

If you use the Classic design, its Edit content panel lets you toggle which information sections appear around the booking flow:

Section	Shows
Information card	A summary card of key venue details.
About	Your venue description.
Location map	An embedded map.
Contact details	Your contact details.
Terms & conditions	Your terms and conditions.
Social icons	Links to your social profiles, in the footer.

Turn off any section you don’t need to keep the widget focused, then Save design.

Custom CSS

For finer control you can add custom CSS. Your rules are automatically scoped to the widget, so they only affect the embedded widget and can’t leak out and restyle the rest of your website. Use it for small tweaks - spacing, button shapes, typography touches - on top of your branding.

For a full re-theme - the colour/size tokens, custom fonts, responsive tweaks and a selector reference - see Styling with custom CSS.

Colours, fonts and logo

The widget’s accent colour, background, text colour and font all come from your branding - set them there, not in the designer, and every widget picks them up.

The logo is the same: by default a widget shows your branding logo. You can also set a per-widget logo if you want a widget to display a different logo from your main branding - handy for a co-branded or campaign-specific embed.

Tip

Every change you make in the designer is reflected immediately in the live preview beside it, which is the real widget rendered in a frame - so you can dial in the look before you embed it.