Putting the booking form on your own website

Your website already does the persuading — the photographs, the menu, the little bit about the building. It seems a shame for the last step to send people somewhere else. The booking form can sit directly on one of your own pages instead, so the whole thing happens without the guest leaving your site.

This is a job for whoever looks after your website. It's two small pieces of code and about five minutes' work for them.

What your web person needs

Two things go on the page where you'd like the form to appear. First, an empty container — a div with an id, say nomnom-booking. Second, a script tag pointing at https://api.nomnom-app.net/web/embed.js, carrying two attributes: data-account (your booking code, below) and data-target (the id of that container).

One detail that matters more than it looks: the script tag has to sit on the page after the container, as an ordinary tag in the page's markup. It looks for the container the instant it runs, so putting it in the page head, or injecting it through a tag manager or a "custom HTML" widget, leaves it with nothing to fill.

A venue web page with the NomNom booking form rendered inline inside it, beneath the venue's own header and navigation.

Finding your account code

Your booking code is the last part of your own booking link.

In NomNom Web: open the account menu (top-right) → SettingsOnline Booking & DiscoverCopy booking link.

Click that and the full link goes to your clipboard — paste it somewhere you can read it, then take the part after the last slash. Do copy it rather than reading it off the screen: the line shown under the button is shortened to fit, so on a narrow window the end of it is exactly the bit you need and exactly the bit that's hidden.

How it will look

The form arrives with its own styling, kept to its own container so it can't leak out into the rest of your page. It sizes itself to whatever space you give it, because it genuinely is part of the page rather than a fixed-height window sitting inside it — which is precisely why it isn't built as an iframe. An iframe would be stuck at one height, and the calendar step would end up scrolling around inside a little box.

Two things worth knowing before you see it. Any colours you've customised for your own booking page don't come across — the embedded form uses the standard styling, and matching it to your site's look is something your web person can do with their own CSS. And a small "Bookings by NomNom" credit sits underneath the form.

If something goes wrong

Leave a plain Book a Table link inside the container before the script replaces it. If scripting never runs at all, that link stays put and the guest still has a way through.

It's worth having a booking link elsewhere on the site too — in your header or footer. If the form starts loading and then can't finish, it shows a short "unable to load" message in that space rather than the fallback link, and a second route means nobody is left stuck.

One thing to remember: your phone number is worth keeping easy to find on the same page. The form points guests at the telephone in a few situations — a meal that needs more notice, a sitting that's filled — and it doesn't print the number itself.