Help centre › Website widget › Adding the widget on popular platforms

Adding the widget on plain HTML or a custom site

If your site is hand-coded HTML or built with a static site generator like Hugo, Jekyll, Eleventy, or Astro, the Make a Rezzy reservation widget is the easiest case of all — paste the embed snippet into your source files and rebuild. This article covers both routes.

Before you start, copy the embed snippet for your widget — see Adding the widget to your site if you have not got that far.

A hand-coded HTML site

  1. Open the HTML file for the page you want the widget on — for example index.html or book.html.
  2. Paste the <div data-makearezzy-widget="…"> part of the snippet exactly where you want the widget to render on the page.
  3. Paste the <script> part anywhere on the same page. The common choice is just before </body> so it does not block the rest of the page from rendering, but it works in any position.
  4. Upload the file to your web host the way you usually do.

The same snippet can live on more than one page — your homepage and a dedicated bookings page, for example. Each page just needs its own copy of both blocks.

Static site generators

The snippet is plain HTML, so most generators will pass it through untouched. The catch is that some generators escape angle brackets by default — you may need a "raw" or "verbatim" wrapper in your templating syntax:

  • Hugo — wrap the snippet in {{ "" | safeHTML }} inside your template, or pass it through a shortcode that emits {{ .Inner | safeHTML }}.
  • Jekyll — paste it straight into a Markdown or HTML page. Jekyll passes raw HTML through by default. If your Markdown renderer is escaping it, switch the file extension to .html.
  • Eleventy — paste straight into an HTML, Nunjucks, or Liquid template. If you are using Markdown with a strict renderer, wrap the snippet in {% raw %}…{% endraw %} (Nunjucks) or place it in an HTML partial.
  • Astro — paste straight into the .astro page. Astro renders inline HTML and scripts as-is. Use is:inline on the <script> tag so Astro does not try to bundle it.

Rebuild and deploy your site the way you usually do. The widget will be live on the next published version.

Where to go next