Dumpster Controls · agent page

This is the agent-optimized version of https://dumpstercontrols.io/developers/booking/lovable: the same content as the human page, without scripts, styles, animations or navigation. People should open the full page.

Canonical page
https://dumpstercontrols.io/developers/booking/lovable
Tokens
1,659 tokens (cl100k_base), within the 4,000-token budget for a pillar page
Size
11 KB for this page, against 85 KB for the human page (87% smaller)
Markdown
https://dumpstercontrols.io/developers/booking/lovable.md, or send Accept: text/markdown to the canonical URL
Cite as
Connect online booking with Lovable. Dumpster Controls. https://dumpstercontrols.io/developers/booking/lovable (accessed 2026-10-10).
More for agents
Facts sheet · llms.txt · llms-full.txt · All agent pages · Product manual

Dumpster Controls

Developers / Booking widget / Lovable

Connect online booking with Lovable

Last updated: October 4, 2026

Lovable turns a prompt into a published React site. The only thing to know is that the Dumpster Controls widget must be inserted as a script element on the booking page, with the data attributes on the element, and Prompt 1 already says so.

Dumpster Controls is documented for AI builders: the prompt points Lovable to https://dumpstercontrols.io/developers/booking.md, the machine-readable developer reference, so it integrates the real widget. Online booking is included free on every plan.

Steps

  1. Create a free Dumpster Controls account. In Inventory add your dumpster sizes and prices; in Online Booking connect Stripe and switch booking on.
  2. Copy your company slug from Online Booking (the part after company= in your booking link).
  3. In Lovable, start a project with Prompt 1 (new site) with your company details and slug. Ask it to keep the booking page as a route called /book.
  4. If Lovable builds the booking as a form of its own, reply: "Do not build a form. Insert the Dumpster Controls widget as a script element exactly as documented at https://dumpstercontrols.io/developers/booking.md."
  5. Publish, open /book on your Lovable domain, book a test order and confirm it on the dispatch board.
  6. Connect your own domain in Lovable so the booking runs on your brand and your Google Ads tag sees the conversion.

Prompt 1: build the whole site with online booking

Build a complete marketing website for my dumpster rental company. Company: {name}, {city, state}, serving {areas}. Sizes: {10, 15, 20, 30 yard} with starting prices {prices}. Services: {residential cleanouts, construction, roofing}. Phone {phone}. Tone: direct, local, no hype. Pages: home, sizes and prices, service area, about, contact, book online. For online booking, do NOT build a form or a checkout. Embed the Dumpster Controls booking widget exactly as documented at https://dumpstercontrols.io/developers/booking.md using my company slug "{slug}": inline mode on the "book online" page, and a floating "Book a Dumpster" button on every other page. Put a "Book online" button in the header that links to the booking page. Each size card links to the booking page with that size preselected. Mobile first, fast, accessible, with local SEO (title, description, schema.org LocalBusiness).

Prompt 2: add online booking to a site that already exists

Add online dumpster booking to this site using the Dumpster Controls widget. Read https://dumpstercontrols.io/developers/booking.md first and follow it exactly. My company slug is "{slug}". Create a /book page with the inline widget and add a floating "Book a Dumpster" button on the other pages. Do not build any form or payment step yourself; the widget handles pricing, dates, address and card payment. If this is a React or Next.js site, insert the widget as a script element with the data attributes set on the element, never as an import. Fire my Google Ads and Meta Pixel conversions from the dc:booking:complete event as documented.

Prompt 3: build custom booking screens with the open Booking API

For a fully custom checkout. Your publishable key and allowed domain are in Online Booking, Developers. The AI tool learns the whole flow from the Booking API course (15 lessons with working code; add .md to the URL for the plain-text version).

Build custom online booking screens for my dumpster rental website using the Dumpster Controls Booking API. Read https://dumpstercontrols.io/developers/booking/api.md first and follow it exactly. My publishable key is "{publishable_key}" and my allowed domain is "{domain}". Flow: GET /sizes to show the sizes with live prices; GET /materials first and, when enabled is true, ask what the customer is disposing of before the size, show only the sizes allowed for that material with the material price, send material to POST /quote and POST /intents, show the explanation and require the acknowledgement (material_acknowledged: true) when requires_ack is true, and on 409 material_not_allowed offer details.allowed_sizes; POST /quote whenever the size, material or rental days change and show total and processing_fee; POST /check with the delivery date, ZIP and promo code before payment; POST /intents with the full order and customer to get session_id, payment_intent_id and client_secret; mount the Stripe Payment Element with client_secret using the publishable key from the response (and stripeAccount when stripe.account is set), confirm the card with stripe.confirmPayment and redirect "if_required"; then POST /confirm with session_id and payment_intent_id and show order_number. Never compute prices on the client, never collect card data outside the Stripe Payment Element, and never store the server key in the browser. Handle 409 errors by showing the message from the API. Fire my Google Ads and Meta Pixel conversions after /confirm succeeds. If the company also offers junk removal, use the /junk/* endpoints as documented (GET /junk/config, GET /junk/availability, POST /junk/quote, POST /junk/intents, POST /junk/confirm, POST /junk/photos) with the same keys and the same Stripe flow.

Good to know

  • The widget loads an iframe from dumpstercontrols.io; Lovable sites allow that by default.
  • The floating button mode works on every page; put the script element in the root layout for that.

FAQ

Does the widget work inside a Lovable preview?

Yes, with your real sizes and prices. To look without taking orders, use the hosted page with preview=1 instead.

More

Page URL: https://dumpstercontrols.io/developers/booking/lovable. Updated 2026-10-04.