The Addagio booking widget works in two modes: a floating "Book Now" button that opens your booking page in a popup overlay, or an inline embed that renders the booking form directly inside your page — like Calendly's inline widget.
How the widget works
A floating button appears in the bottom corner of your website (left or right)
Customer clicks it
Your booking page (addagio.io/book/your-slug?embed=1) loads in an iframe inside a modal overlay
Customer completes the booking inside the overlay
They close the popup and continue browsing your site
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.
Inline mode — booking form inside your page
Instead of a floating button, you can render the full booking flow directly in your page layout. Add a placeholder div where you want the form, then load the script:
The widget replaces the div with your booking form (services, calendar, checkout). The frame auto-resizes to fit its content — no scrollbars, no fixed heights. Customers book without ever leaving your site.
The link inside the div is optional but recommended: it is a real, crawlable link that search engines see before any JavaScript runs. After the widget loads it becomes a small attribution line under the form — and a fallback for visitors with JavaScript disabled.
Inline options (as data attributes on the div):
Attribute
Default
Description
data-addagio-inline
required
Your business slug
data-height
700
Initial height in px (auto-adjusts after load)
data-radius
0
Border radius in px
You can also configure inline mode via JavaScript:
If container is omitted, the form is rendered where the script tag sits. You can place multiple inline widgets on one page — each div gets its own form.
Configuration options
Option
Type
Default
Description
slug
string
required
Your business slug
buttonText
string
"Book Now"
Text shown on the floating button
color
string
"#C67B5C"
Button background color (hex)
position
string
"right"
"left" or "right" corner
size
string
"medium"
"small", "medium", or "large"
delay
number
0
Milliseconds to wait before showing the button
autoOpen
boolean
false
Automatically open the popup on page load
url
string
auto
Override the booking URL entirely
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.