Embed Booking Widget on Your Website

The Addagio booking widget adds a floating "Book Now" button to any website. When customers click it, your booking page opens in a popup overlay. No redirect, no iframe — just a clean modal.

How the widget works

The overlay has a blurred dark backdrop, a max-width of 480px, and goes fullscreen on mobile (under 640px).

Setup

Step 1: Get your slug

Your slug is found in Dashboard → Settings under "Booking URL". It is the part after addagio.io/book/.

Step 2: Paste this code before ``

That is the complete setup. The script is 3KB and loads asynchronously — it does not block page rendering.

Configuration options

JavaScript API

After the widget loads, you can control it programmatically:

// Open the booking popup from your own button
window.addagioWidgetAPI.open();


// Close the booking popup
window.addagioWidgetAPI.close();

This lets you trigger the booking from any custom element on your page.

Platform-specific instructions

WordPress — Go to Appearance → Theme Editor → footer.php and paste the code before . Or use the "Insert Headers and Footers" plugin.

Wix — Go to Settings → Custom Code → Body - end and paste the code.

Squarespace — Go to Settings → Advanced → Code Injection → Footer and paste.

Shopify — Go to Online Store → Themes → Edit Code → theme.liquid and paste before .

Keyboard and accessibility

The popup closes when pressing Escape. Clicking the dark backdrop also closes the popup. The close button is visible at the top right of the screen when the overlay is open.

CSS customization

The button has the ID #addagio-widget-btn. The overlay is #addagio-widget-overlay. The iframe is #addagio-widget-frame. You can target these with custom CSS on your site to adjust positioning or styling.