Technical

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


  • 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.


    Configuration options


    OptionTypeDefaultDescription
    slugstringrequiredYour business slug
    buttonTextstring"Book Now"Text shown on the floating button
    colorstring"#C67B5C"Button background color (hex)
    positionstring"right""left" or "right" corner
    sizestring"medium""small", "medium", or "large"
    delaynumber0Milliseconds to wait before showing the button
    autoOpenbooleanfalseAutomatically open the popup on page load
    urlstringautoOverride 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.

    embedwidgetwebsitepopupjavascriptfloating button