Your website

Paste HaulHQ into a site you already run

The HTML embed: one tag that puts your quote form, booking flow or chatbot inside a page of your own. What it needs from your site, every tag and its parameters, and the honest limits of a frame.

This applies to both workflows

What are the two workflows?

This page assumes you have already made the choice

An embed is for a site you already run that lets you paste raw HTML. If you have no website, or yours strips HTML out, this is not your answer -- your HaulHQ page is already live at yourname.myhaulhq.com, takes quotes and bookings and runs the chatbot, with nothing to install, and your own domain can be pointed at it. If your site is WordPress, the bridge plugin does more than an embed can -- search-engine markup, the floating chat launcher, the services list. Which website should I use? weighs all of that properly.

What an embed is

For a site that is not WordPress but lets you paste raw HTML: a hand-built site, or a builder with a "custom HTML" or "embed code" block. You paste one tag and the quote form (or the booking flow, or the chatbot) appears inside your page. There is no setting to turn on and nothing to connect. The tag is addressed to your account by your HaulHQ address, so it carries no key and is safe in public page source.

The tags for your account, with your address already filled in, are under Website, on the Add to Your Site tab. Copy from there rather than editing the examples below.

What	Address	What it does	Who sees it
Quote form	`/embed/form`	Your junk removal lead form. Quotes from your load tier prices, and can book as well as quote.	Junk removal
Booking	`/embed/book`	The full booking flow: pick a service or container, pick dates, pay.	Dumpster rental
Container rental	`/embed/rental`	The container booking on its own, for a page about one dumpster or trailer.	Dumpster rental
Chatbot	`/embed/chat`	The conversational estimate assistant, as a panel in your page.	Everyone
Products & equipment	`/embed/products`	Your catalog as a grid: containers, services and add-ons, with prices. Each card opens your HaulHQ page.	Everyone
Single product	`/embed/product`	One catalog item on its own, for a page about that container or service. The tag needs the item's slug in place of the placeholder.	Everyone
Reviews	`/embed/reviews`	Your Google reviews and testimonials with the combined rating, the same ones your HaulHQ page shows.	Everyone
Before & after gallery	`/embed/gallery`	Your featured before-and-after photo pairs, newest first.	Everyone
Zip code call-to-action	`/embed/zip-cta`	A compact "Check Availability" zip field. Sends the visitor to your HaulHQ page with the zip filled in.	Junk removal
Service area	`/embed/service-area`	The cities or zip codes you serve, from your service area settings.	Everyone

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/form"
  title="Get a free quote"
  width="100%"
  height="700"
  style="width:100%;height:700px;border:0"
  loading="lazy"></iframe>

The quote form. Replace yourname with your HaulHQ address, or copy the pre-filled version from Settings.

That is the whole embed. The form scrolls inside its box if it grows taller than the height you gave it, so nothing is ever cut off. To have the box grow to fit instead, the page needs a listener. On WordPress, the HaulHQ Bridge plugin is that listener from version 1.7.12 on; older versions ignore these tags, so update the plugin or paste the script. On any other site, paste this once anywhere on the same page:

<script>
(function () {
  var origins = ["https://yourname.myhaulhq.com","https://embed.haulhq.app"];

  // EMBED-06: carry the container from the product grid to the booking page.
  //
  // WordPress reads haulhq_product server-side and renders the right
  // iframe. A pasted tag cannot read its own parent's query string, so the
  // parent hands it over here. ONE parameter name, on the two booking embeds
  // only, sanitised as a slug: copying the parent's query string wholesale
  // would be a way to smuggle anything into our origin. An unknown slug lands
  // on the ordinary pick-a-container flow, which is what a stale link from a
  // deleted product should do.
  function forwardProduct() {
    var wanted = new URLSearchParams(window.location.search).get('haulhq_product');
    if (!wanted || !/^[a-z0-9-]{1,64}$/.test(wanted)) return;
    var frames = document.querySelectorAll('iframe.haulhq-frame');
    for (var i = 0; i < frames.length; i++) {
      var src = frames[i].getAttribute('src') || '';
      if (!/\/embed\/(rental|book)(\?|$)/.test(src)) continue;
      var url = new URL(src, window.location.href);
      if (url.searchParams.get('product') === wanted) continue;
      url.searchParams.set('product', wanted);
      frames[i].setAttribute('src', url.toString());
    }
  }
  forwardProduct();
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', forwardProduct);
  }

  window.addEventListener('message', function (e) {
    if (origins.indexOf(e.origin) === -1) return;
    if (!e.data || !e.data.type) return;

    var frames = document.querySelectorAll('iframe.haulhq-frame');
    var frame = null;
    for (var i = 0; i < frames.length; i++) {
      if (frames[i].contentWindow === e.source) { frame = frames[i]; break; }
    }
    if (!frame) return;

    if (!frame.hasAttribute('data-haulhq-base-height')) {
      frame.setAttribute('data-haulhq-base-height', frame.style.height || '');
    }

    var type = e.data.type;
    if (type === 'haulhq-embed-resize' || type === 'haulhq-form-resize' || type === 'haulhq-book-resize') {
      var h = parseInt(e.data.height, 10);
      if (h > 0) frame.style.height = h + 'px';
    }
    if (type === 'haulhq-book-reset-height') {
      var base = frame.getAttribute('data-haulhq-base-height');
      if (base) { frame.style.height = base; } else { frame.style.removeProperty('height'); }
    }
    if (type === 'haulhq-book-scroll') {
      frame.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
})();
</script>

Lets every HaulHQ embed on the page size itself. Needed unless the page is WordPress with HaulHQ Bridge 1.7.12 or newer. Without it, the embed scrolls inside its box, which also works. Harmless alongside the plugin.

Does your site accept raw HTML?

The tag needs a field that takes HTML as written. Most builders have one, usually called an HTML, Embed or Custom Code block. If yours escapes the tag into visible text, or strips it, link to your HaulHQ page instead. We support the tag and your HaulHQ page; we do not support any particular site builder, so we cannot tell you where its HTML block lives or why it might refuse a frame.

Renting containers takes two pages

Every other embed is one tag on one page. Container rental is different, because a customer who picks a container has to go somewhere to book it, and a tag cannot open a window over your page the way the WordPress plugin can. So you make two pages and tell HaulHQ where the second one is.

1Make a page on your site for booking. Paste the Container rental tag on it and nothing else. This is where customers finish.
2Put its address in Website > Add to Your Site, in the Booking Page URL box at the top. A full address starting with https://, or a path on your own site starting with a slash.
3Paste the Products & equipment tag wherever you list your containers. That is the page customers land on first.
4Paste the script from this page once on both pages, unless your site is WordPress with the HaulHQ plugin, which does it for you.

Book Now on a container then opens your booking page with that container already chosen. The customer never leaves your site, and your booking page is a real address you can link to, bookmark and count visits to.

If you skip the Booking Page URL

Book Now still works. The booking flow opens inside the same box the grid is in, so the customer can finish, but there is no page of your own to link to or measure and the box changes under them. Setting the address is the better version of this, and it takes one line.

One more page you can make, and it is optional: a page about a single container, using the Single product tag. Put its address in that product's Detail Page URL in your catalog, and the grid will link the container's name to it while Book Now still goes to your booking page.

Each embed, its tag and its parameters

Every tag below is addressed to your account by your HaulHQ address; copy the pre-filled ones from Website > Add to Your Site. Parameters go on the end of the src, as ?name=value, and are named after the matching WordPress shortcode attribute so the two read alike. A parameter the embed does not know is ignored. A value in CAPITALS is a placeholder you must replace; the embed shows nothing until you do.

Quote form

Your junk removal lead form. Quotes from your load tier prices, and can book as well as quote.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/form"
  title="Get a free quote"
  width="100%"
  height="700"
  style="width:100%;height:700px;border:0"
  loading="lazy"></iframe>

Quote form. Replace yourname with your HaulHQ address.

Parameters: show_price, form. Same meaning as on the [haulhq_form] shortcode.

Booking

The full booking flow: pick a service or container, pick dates, pay.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/book"
  title="Book now"
  width="100%"
  height="600"
  style="width:100%;height:600px;border:0"
  loading="lazy"></iframe>

Booking. Replace yourname with your HaulHQ address.

Parameters: product. Same meaning as on the [haulhq_booking] shortcode.

Container rental

The container booking on its own, for a page about one dumpster or trailer.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/rental"
  title="Book a container"
  width="100%"
  height="600"
  style="width:100%;height:600px;border:0"
  loading="lazy"></iframe>

Container rental. Replace yourname with your HaulHQ address.

Parameters: product. Same meaning as on the [haulhq_booking] shortcode.

Chatbot

The conversational estimate assistant, as a panel in your page.

<iframe
  src="https://yourname.myhaulhq.com/embed/chat"
  title="Chat with us"
  width="100%"
  height="600"
  style="width:100%;max-width:400px;height:600px;border:0"
  loading="lazy"></iframe>

Chatbot. Replace yourname with your HaulHQ address.

Products & equipment

Your catalog as a grid: containers, services and add-ons, with prices. Each card opens your HaulHQ page.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/products"
  title="Our services and equipment"
  width="100%"
  height="720"
  style="width:100%;height:720px;border:0"
  loading="lazy"></iframe>

Products & equipment. Replace yourname with your HaulHQ address.

Parameters: type, layout, columns, show_specs, show_pricing, featured, cta_text, cta_url. Same meaning as on the [haulhq_products] shortcode.

Single product

One catalog item on its own, for a page about that container or service. The tag needs the item's slug in place of the placeholder.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/product?product=YOUR-PRODUCT-SLUG"
  title="Product"
  width="100%"
  height="940"
  style="width:100%;height:940px;border:0"
  loading="lazy"></iframe>

Single product. Replace yourname with your HaulHQ address.

Required: replace YOUR-PRODUCT-SLUG with the item's slug. Open the item in Catalog: the slug is the slug="..." value in the WordPress shortcode shown under Detail Page URL. Your HaulHQ page and the plugin use the same one.

Parameters: product, show_specs, show_pricing, cta_text. Same meaning as on the [haulhq_product] shortcode.

Reviews

Your Google reviews and testimonials with the combined rating, the same ones your HaulHQ page shows.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/reviews"
  title="Customer reviews"
  width="100%"
  height="1600"
  style="width:100%;height:1600px;border:0"
  loading="lazy"></iframe>

Reviews. Replace yourname with your HaulHQ address.

Parameters: count, show_summary, show_dates. Same meaning as on the [haulhq_reviews] shortcode.

Before & after gallery

Your featured before-and-after photo pairs, newest first.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/gallery"
  title="Our recent work"
  width="100%"
  height="1400"
  style="width:100%;height:1400px;border:0"
  loading="lazy"></iframe>

Before & after gallery. Replace yourname with your HaulHQ address.

Parameters: limit, heading. Same meaning as on the [haulhq_gallery] shortcode.

Zip code call-to-action

A compact "Check Availability" zip field. Sends the visitor to your HaulHQ page with the zip filled in.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/zip-cta"
  title="Check availability"
  width="100%"
  height="220"
  style="width:100%;height:220px;border:0"
  loading="lazy"></iframe>

Zip code call-to-action. Replace yourname with your HaulHQ address.

Parameters: layout, theme, color, label, placeholder, booking_url. Same meaning as on the [haulhq_zip_cta] shortcode.

Service area

The cities or zip codes you serve, from your service area settings.

<iframe
  class="haulhq-frame"
  src="https://yourname.myhaulhq.com/embed/service-area"
  title="Service area"
  width="100%"
  height="680"
  style="width:100%;height:680px;border:0"
  loading="lazy"></iframe>

Service area. Replace yourname with your HaulHQ address.

Parameters: format. Same meaning as on the [haulhq_service_area] shortcode.

The honest limits of an embed

No search-engine value. An embed is a frame; what is inside it belongs to HaulHQ's page, not yours. Your page carries its own headings, text and markup, and that is where your SEO lives. If you want HaulHQ content that search engines read as part of your site, that is the WordPress plugin.
No floating chat launcher. On WordPress the plugin puts a chat bubble in the corner of every page. The chatbot embed is a panel that sits where you paste it. The conversation is identical; only the packaging differs.
Only what is in the table above. Everything listed there is embeddable; anything else the plugin renders on WordPress (the services list, the full gallery page) is not. All of it is finished on your HaulHQ page, which is the shortest path if it matters to you and you are not on WordPress.

Test it before you tell anyone

1Open the published page, not the builder preview. Previews often refuse to load third-party frames that are fine when live.
2Do it on a phone. Most of your customers will.
3Complete a real submission end to end and check the lead arrives under Leads in HaulHQ.
4Scroll to the bottom of the form and confirm you can reach the last button, with or without the optional script.

Common mistakes

"I pasted the tag and my page shows the code as text."

The field you pasted into escapes HTML rather than rendering it. Find your builder's HTML, Embed or Custom Code block; if it has none, or strips the tag, link to your HaulHQ page instead. It needs no HTML at all and works everywhere.

"The form is cut off at the bottom."

The frame is shorter than the form and nothing on the page is listening for its height. The form still scrolls inside its box, so nothing is lost. To have it grow to fit: on WordPress, update HaulHQ Bridge to 1.7.12 or newer; anywhere else, paste the script from the Add to Your Site tab once on the same page. Or give the tag a taller height.

"I embedded the form so my site would rank for junk removal."

An embed contributes nothing to your page's search ranking; its contents belong to HaulHQ's page. Write your own headings and text on the page around the form. Search-engine markup for your products and reviews is a WordPress plugin feature.

"The product grid on my WordPress site has search-engine markup; the embedded one does not. Is the embed broken?"

No, and the difference is by design. On WordPress the plugin renders the grid into your page itself, with Product and ItemList markup search engines read as yours. An embedded grid is a frame: it is a booking surface, not an SEO asset, and its markup belongs to HaulHQ's page. Write your own headings and text around it, and if the markup matters to you, that is the WordPress plugin.

"The frame is blank on my site but works when I open the address directly."

Your site is sending a security header (a Content-Security-Policy frame-src or frame-ancestors rule) that blocks frames from other addresses. Ask whoever set up the site to allow *.myhaulhq.com, or link to your HaulHQ page instead.