Online Booking · updated 2026-08-08

    How to embed the booking widget on your website in Dumpster Controls

    The embeddable widget puts the full booking experience inside your own website, so your Google Ads tags and Facebook Pixel keep tracking conversions on your domain.

    Before you start

    • A website where you can add a Custom HTML or Embed Code block (WordPress, Wix, Squarespace, GoDaddy, Shopify, Webflow, Google Sites, or custom HTML)
    • Online Booking active
    1. 1

      Open the widget section

      In "Booking Page", select the "SEO & Integrations" tab and scroll to "Embed Booking Widget" ("Install your booking page directly on your website").

    2. 2

      Choose the installation method

      Under "Choose installation method", pick "Full Page Embed" (marked "Recommended": "Renders the complete booking experience (select dumpster + pay) directly inside your website. The customer never leaves your domain.") or "Floating Button" (adds a floating "Book Now" button that opens the booking flow in a modal overlay).

    3. 3

      Copy your embed code

      Copy the snippet under "Your embed code". For Full Page Embed it is a div with id dc-booking plus a script tag loading https://dumpstercontrols.io/embed/dc-booking-widget.js with data-company set to your slug and data-mode="inline". For the Floating Button, the script uses data-mode="fab" plus data-color, data-position, and data-label.

    4. 4

      Paste it into your site

      Follow the on-screen steps: in your website editor, add a "Custom HTML" or "Embed Code" block (in the footer for the floating button so it loads on every page), paste the code, then save and publish.

    5. 5

      Customize (optional)

      The "Customization attributes" list documents each attribute: data-company ("Your company slug (required)"), data-container (the div id for inline mode, default dc-booking), data-promo ("Pre-apply a promo code automatically (optional)"), data-color (button hex color), data-position ("right" or "left"), and data-label (button text).

    6. 6

      Add conversion tracking (optional)

      Under "Conversion Tracking (Optional)", copy the listener snippet for the dc:booking:complete browser event. It fires when a booking completes, with the order data in the event detail, so you can call your Google Ads or Facebook Pixel conversion tags.

    What happens next

    • The widget auto-resizes to fit its container and always renders in light mode inside your site.
    • If you also set a "Booking Confirmed Page URL", widget customers are redirected straight to your thank-you page after payment.

    Troubleshooting

    The widget does not appear on my page.

    For inline mode, both parts are required: the div with the matching id (default dc-booking) and the script tag with your data-company slug. Verify the slug matches your "Booking URL".

    My conversion tags do not fire.

    Add the dc:booking:complete listener script on the same page as the widget, as the on-screen note says: "Add this script on the same page as the widget."

    Related guides

    Still stuck? Talk to our team

    Open a support ticket inside the app and our team will answer there.

    Log in and open a support ticket

    Try it yourself, free

    The software is 100% free with unlimited orders. No credit card, no demo, no contract.

    Create your free account