Adding the booking form to a Wix site

Wix is the awkward one, and we'd rather say so plainly than have you find out after an afternoon of it. The general article explains what the code does and where to find your booking code — what follows is why Wix needs handling differently.

Not the Embed HTML element

The obvious place to paste anything like this on Wix is the Embed HTML element (the HTML iFrame element in Wix Studio). It puts your code inside a sandboxed iframe: a little window sitting on the page, sealed off from the rest of it, at whatever fixed size you drag it to.

The booking form is built to grow and shrink as the guest moves from party size to date to time — that is precisely why it isn't an iframe anywhere else. Dropped into a fixed window it ends up scrolling around inside a box a few hundred pixels tall, and the calendar step suffers most. It will render. It will be worse than the alternative.

What we'd suggest instead

On Wix, a plain Book a Table button pointing at your booking page is the honest best answer, and it takes a minute: add a button, set its link to your booking link, done. Guests leave your site for the last step, which isn't ideal — but the form they land on is full width, sized properly, and shows Apple Pay and Google Pay, none of which is true of anything you can put on a Wix page.

If you want it inline anyway

There is a route. Your web person will need to test it on your actual site, and we can't promise this one the way we can promise WordPress or Squarespace.

Wix's Custom Code panel does put code into the real page rather than an iframe. It's in your site dashboard under Settings → Custom Code, in the Development & integrations section, and your site has to be published on a connected domain of your own before Wix will let you add anything there.

The catch is that Custom Code only offers three positions — Head, Body – start and Body – end. None of those is “in the middle of my home page, under the photographs”. So the code has to place itself. Drop an ordinary Wix Text element on the page exactly where the form should appear, containing nothing but the word NOMNOM-BOOKING, and this snippet swaps that text for the form once Wix has finished drawing the page.

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

<script>
(function () {
  var MARKER = 'NOMNOM-BOOKING';
  var slot   = document.getElementById('nomnom-booking');
  var tries  = 0;

  // Wix draws its pages with JavaScript after the page arrives, so the
  // marker almost never exists yet. Look again every half second, and
  // give up after twenty seconds rather than spinning forever.
  function findMarker() {
    var hits = [], all = document.body.getElementsByTagName('*'), i, j, k;
    for (i = 0; i < all.length; i++) {
      if (all[i].textContent.trim() === MARKER) hits.push(all[i]);
    }
    for (j = 0; j < hits.length; j++) {            // innermost match wins
      var wraps = false;
      for (k = 0; k < hits.length; k++) {
        if (k !== j && hits[j].contains(hits[k])) { wraps = true; break; }
      }
      if (!wraps) return hits[j];
    }
    return null;
  }

  function place() {
    var marker = findMarker();
    if (!marker) {
      if (++tries > 40) return;
      setTimeout(place, 500);
      return;
    }
    marker.textContent = '';
    marker.appendChild(slot);
    slot.style.display = '';

    var s = document.createElement('script');
    s.src = 'https://api.nomnom-app.net/web/embed.js';
    s.setAttribute('data-account', 'YOUR-CODE');
    s.setAttribute('data-target',  'nomnom-booking');
    document.body.appendChild(s);
  }

  place();
})();
</script>

Add it as a single Custom Code entry, placed at Body – end, applied to the page that carries the marker. Replace YOUR-CODE with your booking code in both places.

One honest caveat beyond the wallets. Wix builds its pages with JavaScript after the page arrives, which is why the snippet waits and keeps looking rather than checking once. That also makes it the sort of thing that can stop working when Wix changes how it draws pages, with no warning and nothing in your dashboard to say so. Keep a booking link in your header or footer so there is always a second way through.

Apple Pay and Google Pay

Not on Wix, whichever route you take. Stripe only offers the wallets on a website it has verified, and verifying means answering one specific file at one specific address on your domain. Wix gives you no way to put a file there.

Cards work exactly as normal. The wallets simply don't appear, and nothing on the page says why — which is the main reason we'd point you at the button instead.

Prefer to hand the whole thing over?

Everything above is a workaround for the fact that Wix was never built to do this well. If that's more fiddling than you want to take on, we do this ourselves for a number of venues already: a full redesign, hosted by us, with your booking form built directly into the page from the start rather than pasted on afterwards — so none of what's above is anything you ever have to touch again.

There's no charge to build it. Keeping it is £15 a month, and that covers hosting and any change you ever want making — you message us what you'd like changed and we do it, no hourly rate and no quote for every little thing. For most venues that comes out below what the hosting, theme and plugin costs already add up to before a single change is even made.

No pressure either way, and it makes no difference to your booking account whichever you choose. If you'd like to see what we'd put together, just get in touch.