Booking widget embed

Go to Venue Settings>Bookings>Booking Widget>Widget Generator

Once you arrive at Widget Generator, scroll to the widget embed code and select </>Embed examples

This will open the Booking Widget Embed reference for your Venue.

On the right side of this screen, you can see a preview of your current booking widget on desktop, iPad and Mobile views.

Build the embed

The embed builder will add to the code under Paste this into your page as you make changes to throughout the editor. Edits here will overwrite your default settings in admin. If you leave sections blank, these will revert to defaults.

Appearance

• Colours and theme - the overall accent colour, a light or dark background, or an exact background colour to match your website.
• A see-through background - lets your website's own colour show through, instead of the widget having its own solid background.

A hero image

• The hero image - your venue's own photo is used automatically, but you can set a different one for just this embed, or remove it altogether if the page already has its own header or branding.

Prefill

• Prefilled details - send guests straight to a set date, time, party size, space, or a specific event, so they skip a step. Guests can still change anything you've prefilled.

Behaviour

• How the widget behaves on the page - turn off the automatic scroll between steps, show a gift card option, or send the widget's tracking events through to your website's own analytics.

Reference

Every setting in the visual builder can also be added straight into the widget's web address. You'll rarely need to build one of these by hand - the builder does that for you - but it's useful to know what's possible, especially when briefing a web developer or checking what an existing link is set up to do.

Every link needs to know which Now Book It account and venue it's booking for. If you only have one venue, you don't need to specify this - the link opens straight into that venue automatically.

Colours and look

• Your brand colour - pick one colour, and every other colour in the widget is worked out from it automatically.
• Light or dark - choose the overall look of the widget.
• An exact background colour - for a specific shade rather than a generic light or dark theme.
• See-through background - lets your own page's colour show through, instead of the widget having its own background block.
• Cover photo - normally pulled from your venue's own photo, but you can swap it in for just this link, or remove it altogether if the page already has its own header or branding.
• Preview mode - shows sample bookings so you can check colours and layout without ever taking a real booking. For testing only, not for going live.

Sending guests straight to what you want

You can set any of these in advance, so a guest lands on the right choice already made. They can still change it if they want to.

• The date
• The number of guests
• The time
• Which area or space
• A specific event or sitting - handy when you're promoting one particular event, so anyone who clicks the link goes straight to it. This only works properly alongside a set date, since sittings change from day to day.

How the widget behaves on the page

• Stop the page jumping around - turns off the automatic scroll as a guest moves through the booking steps.
• Show gift cards - only worth turning on for venues that sell gift cards online.
• Send tracking info to your own page - a technical option for whoever manages your website's analytics.
• Label the link - useful when the same widget sits on more than one page, so you can identify which page a booking came from.

Setting this up

The visual builder on the Build & embed page is the easiest way to use any of this. Set the options, and it writes the finished address automatically. If you're handing this over to a web developer instead, you can use this section.

How to customise your Hero Image

Go to the heading Customisation Venue tags - hero and wordmark. Here you can generate the code needed to display your banner photo and heading at the top of the booking widget and for how your logo sits on it.

What you can edit

• The hero photo - the large photograph behind the venue name at the top of the widget.
• A cuisine or style label - a short tag shown next to the city, e.g. "Italian dining".
• Two heading lines - a headline and a sub-headline displayed over the photo. Adding either one also makes the photo banner taller.
• A colour patch behind the logo - useful when a logo was designed for a white background and disappears against the photo.
• Logo size - how large the logo appears.
• Logo shape - square corners instead of the default circular frame.
• Hide the logo entirely - removes the logo and its placeholder.
• Hide the venue name - drops the venue's name from next to the logo, useful when the logo already includes the name.

Setting this up

Go to Venue Settings → Bookings → Booking Widget → Widget Messages → Day Closed, and paste your block of text copied from the tag block, adding to the HTML comment already in that field.

That comment is also what's shown to guests on a day the venue is closed, so anything you paste outside it will be read out to guests. Leave any option blank and it's simply left out.

How to customise your space and event photos

Go to the heading Customisation, Service tags - spaces, promos and events

Here you can generate the code needed to display images and text each individual service, space, function or event. 

What you can edit

• A space's own photo - shown on that space's card when guests are choosing where to sit.
• A space's own background colour - used instead of a photo, for a plainer-looking card.
• A short line under the space's name - a byline describing that space.
• Promotional artwork - its own card shown alongside the spaces, which can rotate through several images if you add more than one. Great for events or specials!
• Event artwork - the photo shown for a specific event, including its listing card and the booking confirmation for anyone who books it.
• A short line describing an event - shown on that event's listing card.

Space photos and bylines carry over automatically: set them once on a sitting, and any other sitting for the same space will use them too, unless it has its own.

Promotional and event artwork don't carry over this way - they stay with the specific sitting you added them to.

Setting this up

Go to Venue Settings → Diary → Schedules → the relevant section → Description, and paste your block of text there. Space names must matched exactly.