Website add-ons

Add NabASpot to your website

Let people book without leaving your site. Drop in a booking widget, an iframe, an auto-updating events list, a deep link or an iCal feed.

Website embeds are included in your NabASpot subscription from £10 a month, with the first 30 days free.

Ways to connect

Book button link

Works on every builder. Point a button at the hosted NabASpot booking page.

Iframe

Frame a single booking page. Best for sandboxed builders that offer Embed by URL.

Booking widget

A short script that mounts the booking form for one event on any page that allows scripts.

Events list

An auto-listing block that pulls upcoming events marked Show on website.

iCal feed

Pull published website events into a calendar app or a custom site build.

Live demo · Small Dreams

This preview uses the Small Dreams sandbox so you can see the booking form on a page.

Platform setup guides

Pick your website builder. Each guide says which NabASpot option works best. Snippets below use small-dreams and event popup-play-build-cafe.

Copy-ready snippets for this organisation

Book button link

https://nabaspot-preview.web.app/t/small-dreams/events/popup-play-build-cafe/book

iframe

<iframe
  title="Book with NabASpot"
  src="https://nabaspot-preview.web.app/embed/small-dreams/popup-play-build-cafe"
  style="width:100%;min-height:720px;border:0;"></iframe>

Booking widget (widget.js)

<div id="nabaspot-mount" data-theme="auto"></div>
<script
  src="https://nabaspot-preview.web.app/embed/widget.js"
  data-nabaspot-tenant="small-dreams"
  data-nabaspot-event="popup-play-build-cafe"
  data-nabaspot-theme="auto"
  async></script>

Events list (events.js)

<div data-nabaspot-events="small-dreams"></div>
<script src="https://nabaspot-preview.web.app/embed/events.js" async></script>
WordPress.org (self-hosted) Best: widget.js or events.js in a Custom HTML block

Self-hosted WordPress can run scripts and iframes. Use the block editor Custom HTML block. No shortcode is required.

  1. In NabASpot Admin → Website, add your site origin such as https://www.example.org then save.
  2. Open the page in the WordPress block editor.
  3. Click the block inserter and add a Custom HTML block.
  4. Paste the booking widget, events list or iframe snippet from Admin → Website.
  5. Update or publish the page and confirm the embed loads on the live site.
  • For site-wide events.js, a header or footer code plugin such as WPCode can load the script once across templates. Follow the plugin’s own docs for header scripts.
  • In Elementor, use an HTML widget and paste the same snippet.
  • In Divi, use a Code module and paste the same snippet.
  • The Book button link also works if you only need a button that opens NabASpot.

Official docs: WordPress.org Custom HTML block

WordPress.com Best: Book button link on every plan. iframe or scripts on a plugin-enabled plan

WordPress.com limits which HTML tags work by plan. Free sites cannot use iframe or script tags. Plugin-enabled plans can after hosting features are activated.

  1. If you only need a booking button, paste the Book button link into any link or button. This works on every plan.
  2. For iframe, widget.js or events.js, use a plugin-enabled plan and activate hosting features (WordPress.com documents installing a plugin to activate them).
  3. Add your WordPress.com site origin in NabASpot Admin → Website.
  4. Edit the page, add a Custom HTML block, paste the snippet, then update the page.
  • As of WordPress.com’s current Add code guide, iframe and script tags need a plugin-enabled plan with hosting features activated. Paid plans can install plugins. Confirm on their Plans page if your plan includes that.
  • If custom code is stripped after saving, check the plan and hosting features first.

Official docs: WordPress.com Add code to your site , WordPress.com Custom HTML block , WordPress.com plan features

Wix and Wix Studio Best: iframe via Embed a site (preferred). Book button link always works

Wix Embed HTML runs custom code inside a sandboxed iframe on a Wix domain such as filesusr.com. That breaks allowedOrigins for widget.js and events.js. Prefer Embed a site with your NabASpot embed URL.

This builder may sandbox custom code on a platform domain. Prefer the iframe via Embed by URL. Add only your published site origin by default.

  1. In NabASpot Admin → Website, add the origin of your published Wix site (your custom domain or your *.wixsite.com address).
  2. In the Wix Editor, open Add Elements → Embed Code → Popular Embeds.
  3. Choose Embed a site (not Embed HTML).
  4. Paste your NabASpot iframe URL from Admin → Website (the /embed/… address) and apply.
  5. On Wix Studio, use Add Elements → Embed & Social, then embed a site the same way.
  6. Publish the Wix site and test the booking form.
  • Avoid Embed HTML or a Custom Element with widget.js or events.js. Those scripts would run on the Wix sandbox origin, not your site origin.
  • If you must nest an iframe inside Embed HTML, you may also need the sandbox origin (often https://www.filesusr.com) listed alongside your site origin. Find the exact sandbox origin in the browser network or frame inspector on the published page. Do not add a wildcard platform domain unless you turn on the wildcard opt-in and accept the warning.
  • The Book button link is the safest fallback.

Official docs: Wix Editor embedding a site or widget , Wix Studio HTML iFrame element

Squarespace Best: iframe or widget.js in a Code Block

Use a Code Block for page embeds. Code Injection can load scripts site-wide on plans that include it.

  1. Add your Squarespace site origin in NabASpot Admin → Website.
  2. Edit the page and add a Code Block (or an Embed block where that fits your plan).
  3. Paste the iframe, widget.js or events.js snippet and save.
  4. Publish and confirm the embed on the live page.
  • Code Injection is available on plans that support it. Use it for a site-wide events.js header or footer script when your plan includes Code Injection.
  • The Book button link works if custom code is not available on your plan.

Official docs: Squarespace add custom code , Squarespace Embed blocks

Shopify Best: iframe or widget.js in a Custom Liquid section

Use the theme editor Custom Liquid section to paste NabASpot snippets on a store page.

  1. Add your Shopify storefront origin in NabASpot Admin → Website.
  2. In the theme editor, add a section and choose Custom Liquid when your theme offers it.
  3. Paste the iframe or widget.js snippet and save.
  4. Preview then publish the theme.
  • If your theme does not list Custom Liquid, use the theme code editor only if you are comfortable editing Liquid files, or fall back to the Book button link.

Official docs: Shopify sections and blocks , Shopify editing theme code

Webflow Best: widget.js or iframe in a Code Embed element

Webflow’s Code Embed element accepts HTML, CSS and JavaScript on eligible workspace or site plans.

  1. Add your published Webflow site origin in NabASpot Admin → Website.
  2. Open the Add panel and place a Code Embed element on the canvas.
  3. Paste the widget, iframe or events list snippet and save.
  4. Publish the site (scripts may not run fully in Designer preview).

Official docs: Webflow custom code embed

GoDaddy Website Builder Best: iframe or widget.js in an HTML section

GoDaddy Websites + Marketing supports an HTML section for custom code.

  1. Add your GoDaddy site origin in NabASpot Admin → Website.
  2. In the website editor, add a section and choose the HTML section.
  3. Paste the iframe or widget snippet into the Custom Code field.
  4. Preview then publish.
  • If the HTML section strips scripts, use the Book button link instead.

Official docs: GoDaddy add HTML or custom code

Google Sites Best: iframe via Embed → By URL (preferred)

Google Sites can embed by URL or by embed code. Embed code may run inside a Google sandbox. Prefer By URL with your NabASpot embed address.

This builder may sandbox custom code on a platform domain. Prefer the iframe via Embed by URL. Add only your published site origin by default.

  1. Add the origin of your published Google Site in NabASpot Admin → Website (sites.google.com or your custom domain).
  2. In Google Sites, open Insert → Embed.
  3. Choose By URL and paste your NabASpot /embed/… URL from Admin → Website.
  4. Insert then publish.
  • Avoid Embed code with widget.js or events.js when those scripts would run on a Google sandbox domain such as googleusercontent.com.
  • If you must use Embed code, find the sandbox frame origin in the browser inspector and add that exact origin as well. Prefer the Book button link if that is unclear.

Official docs: Google Sites embed help

Plain HTML or other builders Best: widget.js, events.js or iframe on the page

On any host where you control the HTML, paste a snippet directly. Always allow your exact https origin first.

  1. Add your site origin in NabASpot Admin → Website.
  2. Paste the events list, booking widget or iframe snippet into your page template.
  3. Deploy or publish and hard-refresh to bypass cache.
  • If the builder only allows a link, use the Book button deep link. It works everywhere.

Troubleshooting

  • The widget or iframe does not show. Confirm your exact https origin is listed under Allowed website origins. Confirm your trial or subscription is active. Clear or bypass the site cache and rebuild if your host caches HTML.
  • Content Security Policy on the customer site. If the customer site sets a strict CSP, it may block script-src or frame-src for nabaspot-preview.web.app (or your NabASpot host). Ask their developer to allow that host for scripts and frames.
  • Page builders stripping scripts. Some plans and builders remove script or iframe tags on save. Use the Book button link, or switch to the builder’s official HTML or Embed by URL path. On sandboxed builders, prefer iframe via Embed by URL rather than widget.js.
  • Sandboxed builders and origins. Wix Embed HTML, Google Sites Embed code and similar tools run custom code on a platform sandbox origin. Prefer framing our embed URL from the parent site. Only add a sandbox origin when you have confirmed the exact value. Never enable wildcard platform domains unless you accept the per-organisation opt-in warning.

Next steps

  1. Start your free trial Sign in and use Admin → Website, or ask platform for complimentary access.
  2. Allow your site origin Add https://your-domain.example in Admin → Website so framing and feeds answer your site.
  3. Follow your builder guide Copy the matching snippet. Prefer Embed by URL on sandboxed builders.