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: an empty container, and the script that fills it. This is the whole of it — paste it where the form should sit.

<div id="nomnom-booking">
  <a href="https://book.nomnom-app.net/YOUR-CODE">Book a Table</a>
</div>

<script src="https://api.nomnom-app.net/web/embed.js"
        data-account="YOUR-CODE"
        data-target="nomnom-booking"></script>

Replace YOUR-CODE with your own booking code, in both places — there's a section below on where to find it. data-target has to match the container's id, so if you rename one, rename the other.

The Book a Table link inside the container is a deliberate fallback: the form replaces it once it loads, so anyone whose browser never runs the script still has a way through to your booking page.

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 you take deposits or card details

One extra step here, and only if your website is hosted somewhere other than with us — if we host it, this is already taken care of and you can skip straight past.

Apple Pay and Google Pay only appear on a website Stripe has verified, and it checks each website separately. Put the form on your own pages without doing this and guests simply see the ordinary card form instead. Nothing breaks and cards work exactly as before — but the quickest way for somebody to pay on a phone quietly is not there, and nothing on the page says so.

It is one small file, and it is the same file for everybody. Your web person downloads it from here:

https://stripe.com/files/apple-pay/apple-developer-merchantid-domain-association

and puts it on your site so that it answers at this address:

https://yoursite.co.uk/.well-known/apple-developer-merchantid-domain-association

Two things catch people out: the folder name really does begin with a dot, and the file has no extension on the end.

Tell us once it is up and we will switch your website on at our end. If your site answers on both yoursite.co.uk and www.yoursite.co.uk, mention that too — those count as two separate addresses and both need doing.

If something goes wrong

The fallback link in the snippet above covers the case where scripting never runs at all — the link simply stays where it is.

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.