Embed Widget.

How It Works

VoxelBooking can be embedded on any external website as a floating button. When a visitor clicks the button, the booking page opens in a modal overlay without leaving the host site.

The embed uses a single <script> tag. No iframes, no CSS overrides, no build tools required.

Setup

1. Go to the business's Settings → Embed tab
2. Copy the script tag shown at the top of the page
3. Paste it before the closing </body> tag on any page where you want the booking button

The script tag looks like:

<script src="https://your-domain.com/embed/business-slug.js" defer></script>

Customization

Button Label

The text shown on the floating button. Default is "Book Now". Change it to match the business context ("Reserve Table", "Schedule Visit", etc.).

Button Position

Choose where the button appears on the page:

• Bottom Right (default) - Standard position for action buttons
• Bottom Left - For sites with other widgets on the right

The button uses the business's brand color with auto-calculated contrast text.

Live Preview

The embed settings page includes a live preview pane. Changes to the label and position update the preview in real time before saving.

Domain Allowlist

For security, specify which domains can load the embed script. Enter one domain per line:

example.com
shop.mybusiness.com

When the allowlist is empty, the embed works on any domain. When domains are listed, the script only loads on matching origins. This prevents unauthorized sites from embedding the booking page.

Technical Details

• The script creates a shadow DOM to isolate styles from the host page
• The booking page loads in a modal with a backdrop overlay
• The button inherits the business's brand color and derives accessible text contrast
• No cookies are set on the host domain
• The script is lightweight and deferred (does not block page rendering)