Adding a "Reserve a Table" button to your website

If you’d like a smart booking button on your own website, NomNom has one ready to use. It says Reserve a Table, tries to match your site’s colours, and opens your booking page in a new tab. There’s nothing to switch on in NomNom: you, or whoever looks after your website, add one line of code to the page.

Would you rather guests booked without leaving your site at all? Put the whole booking form on the page instead — see Putting the booking form on your own website.

Add the button

1. Copy your booking link. In NomNom Web, open Settings from the account menu (top right) or the button at the bottom of the left-hand bar, choose Online Booking & Discover, scroll down and click Copy booking link. You’ll see Booking link copied. Settings is for admins only.

2. Pick out your booking code. Paste the link somewhere you can read it. Your booking code is the part after the last slash: if your link is https://book.nomnom-app.net/a1b2c3d4, your code is a1b2c3d4.

In NomNom Web: Settings → Online Booking & Discover → Copy booking link. In the phone app: Settings → Online Booking & Discover → Copy booking link.

3. Add the line of code. It’s a single script tag, and its source is this address with your own code in place of YOUR-CODE:

https://api.nomnom-app.net/web/bookatable.js?account=YOUR-CODE

The button appears exactly where the line sits, so put it in the page itself, at the spot you want the button. In most website builders that means adding a block called something like Custom HTML, Code or Embed and pasting the line in. The picture below shows the whole line.

4. Publish and test. Publish the page, open it in your browser and click the button. Your booking page should open in a new tab.

Choosing the colour

The button works out its colour in this order:

1. A colour you choose. Add data-color="#7A1F2B" inside the same script tag, just after the address, using your own six-character colour code after the #. This always wins.
2. Your site’s own buttons. Without a colour of your own, it looks for a coloured button earlier on the page and copies it, so the two match. White, black and most grey buttons are ignored.
3. Blue. If there’s nothing to copy, the button is a deep blue.

The writing on the button turns black or white to suit, so it stays readable whatever the colour.

Good to know

• The wording is fixed. The button always says Reserve a Table. For different words or your own design, use your website builder’s own button and link it to your booking link — no code needed.
• There’s no button maker in NomNom. Nothing in NomNom writes this line for you, but your booking code is the only part that changes from venue to venue.
• On phones, the button stretches across the full width of the screen.
• No button showing? Check the code is exactly right: if NomNom doesn’t recognise it, nothing appears. Then check the line is in the page itself, not in the page’s head section or a tag manager, where the button has nowhere to show.
• It never needs updating. The button simply opens your booking link, so changes to your booking page, times or tables need nothing doing on your website.
• On a free trial? In NomNom Web, the Get started card’s Put a Book button on your website step has a Copy link button that copies the same link.