---
title: "How to embed the booking widget on your website in Dumpster Controls"
url: "https://dumpstercontrols.io/help/online-booking/embed-the-booking-widget-on-your-website"
description: "The embeddable widget puts the full booking experience inside your own website, so your Google Ads tag and Meta Pixel keep tracking conversions on your domain."
date_modified: "2026-10-04"
type: help
tokens: 1884
token_budget: 2000
format: markdown for AI agents, generated at build from the same content as the HTML page
---

Online Booking · updated 2026-10-04

# 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 tag and Meta Pixel keep tracking conversions on your domain. It takes about 2 minutes: choose the format, copy the code, paste it.

## Before you start

- A website where you can add a Custom HTML or Embed block (WordPress, Wix, Squarespace, GoDaddy, Webflow, or any editor that accepts HTML)
- Online Booking switched on, with Stripe connected and at least one active dumpster size

1. ## Open Install Widget
  In "Online Booking", open the "Install Widget" tab (the section titled "Put online booking on YOUR website"). It walks you through three steps: choose the format, copy the code, paste it on your site.
2. ## Step 1: choose the format
  Pick "Booking form on your page" (marked "Recommended": the full booking embedded in a page, like a native part of your site) or "Floating button" (a small button in the corner of every page that opens the booking in a popup). Each card shows a live preview with your real sizes and prices. If you also offer junk removal, the switch above the cards picks which service the code is for.
3. ## Step 2: copy the code
  Click "Copy code". The snippet already carries your company slug and your brand color. For the form it is two lines, a div and a script tag:
  ```
  <div id="dc-booking"></div>
  <script src="https://dumpstercontrols.io/embed/dc-booking-widget.js" data-company="your-slug" data-mode="inline"></script>
  ```
  For the floating button it is one script tag with data-mode="fab" plus data-color, data-position and data-label.
4. ## Step 3: paste it on your site
  Under "Where do I paste it?", pick your platform for the exact clicks: WordPress (Custom HTML block), Wix (Embed HTML), Squarespace (Code block), GoDaddy (HTML block), Webflow (Embed element) or any other editor that accepts HTML. For the floating button, paste it in the footer so it loads on every page.
5. ## Not your thing? Email it to your web designer
  Click "Email this to my web designer", type their address and send. They receive the code and the step by step, with your email as reply-to. "Prefer your own email app?" opens the same message in your mail program.
6. ## Optional attributes
  Add these to the script tag when you need them: data-company (required, your slug), data-mode (inline or fab), data-color (hex color of the button), data-position (right or left), data-label (button text), data-container (the div id for the form, default dc-booking), data-service="junk" (opens the junk removal booking instead), data-promo (pre-applies a promo code), data-zip (pre-fills the delivery ZIP), data-size (pre-selects a size by yard number) and data-project (pre-selects the debris type). The last four apply to the dumpster booking only. Full reference with examples at dumpstercontrols.io/developers/booking.
7. ## Add conversion tracking (optional)
  The widget fires a dc:booking:complete event in your page when an order is confirmed, with the order number and the amount. In "Online Booking", "Advanced", copy the listener snippet and paste it on the same page as the widget, then call your Google Ads or Meta Pixel conversion tag inside it. 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 never count it as a conversion.

## What happens next

- The form resizes itself to its content; the floating button loads the booking only when clicked.
- If you also set a "Booking Confirmed Page URL" in "Advanced", customers are redirected to your thank-you page after payment.
- On React or Next.js sites, and on builders that generate React such as Lovable, insert the widget as a script element with the data attributes on the element, never as an import; the developer reference shows the snippet.

## Troubleshooting

### The widget does not appear on my page.

For the form, both parts are required: the div with the matching id (default dc-booking) and the script tag with your data-company slug. Check that the slug matches the one in your booking link.

### My conversion tags do not fire.

The dc:booking:complete listener must be on the same page as the widget, and it only fires for confirmed orders. A card authorized without a confirmed order fires dc:booking:unconfirmed instead.

### I want to see the page without taking orders.

Open your hosted page with preview=1 at the end of the link. It shows your real sizes and prices with orders switched off.

## Related guides

- [How to track Google Ads conversions from online bookings in Dumpster Controls](https://dumpstercontrols.io/help/online-booking/track-google-ads-conversions)
- [How to get online booking on your website three ways in Dumpster Controls](https://dumpstercontrols.io/help/online-booking/integrate-online-booking-into-your-website-three-ways)
- [How to build your dumpster rental website with AI and connect online booking in Dumpster Controls](https://dumpstercontrols.io/help/online-booking/build-your-dumpster-rental-website-with-ai)

© 2026 Dumpster Controls. All rights reserved. Made in the USA.

## Frequently asked questions

### Is Dumpster Controls really free?

Yes. The entire app is free for any company at any fleet size: dispatch, online booking, the driver app, invoicing, the Tresha AI assistant and every other feature, with no monthly fee, no trial period and no credit card to sign up. The only cost on the free plan is optional card processing when a customer pays by card through the platform: 2.99% plus $3.99 per transaction on the free plan. The entire app is free; an optional $169 per month plan lowers that to 2.99% plus $0.30 and adds a Sponsored spotlight in the public company directory. Prices as published on dumpstercontrols.io/pricing on 2026-09-23.

### Do you charge per driver, per truck or per order?

No. There is no per-driver, per-truck, per-user or per-order fee, and no order limit. A company with one truck and a company with twenty pay the same for the software: nothing.

### Is there a contract?

No. There is no contract, no minimum term and no setup fee. You create the account yourself, and on the free plan there is nothing to cancel because nothing is billed. The optional $169 lower card rate plan is billed month to month.

### Which countries and languages are supported?

Dumpster Controls serves hauling companies in the United States and Canada. The app interface and the Tresha AI assistant are available in English, Spanish and Portuguese. The public pages, such as the blog, the help center and the landfill finder, are in English.

### How do I switch from another dumpster software?

Create a free account at dumpstercontrols.io/login, with no sales call and no credit card. Then import your customers from a CSV file using the template provided in the app; past orders can also be imported from a CSV. Container sizes and pricing are set up in Settings. The landfill database, with 1,750 active US and Canadian landfills as counted on 2026-10-01, is already loaded, so disposal sites do not need to be typed in. Step-by-step guides are at dumpstercontrols.io/help.

---

Source: https://dumpstercontrols.io/help/online-booking/embed-the-booking-widget-on-your-website (human version of this page).
Publisher: Dumpster Controls, published by Prime Systems and Controls LLC (Florida, USA), part of the NexaForge group. Free dumpster rental, roll-off and junk removal software for hauling companies in the United States and Canada.
Facts for AI assistants: https://dumpstercontrols.io/ai . Site index for agents: https://dumpstercontrols.io/llms.txt . Product manual: https://dumpstercontrols.io/help .