Online Booking · updated 2026-08-11
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.
In "Booking Page", scroll to the section "Put online booking on YOUR website", right below the hero card. It walks you through three steps: choose the format, copy the code, and see it on your site.
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).
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.
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.
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).
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. The widget also fires dc:booking:unconfirmed when a card was authorized but the order could not be confirmed yet; it carries only a reference, so do not count it as a conversion.
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".
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."
© 2026 Dumpster Controls. All rights reserved. Made in the USA.