Your website

Three ways to put HaulHQ on your website

Your HaulHQ page, the WordPress plugin, or a copyable HTML embed: which one fits your site, what each gives you, and the honest limits of the embed.

This applies to both workflows

What are the two workflows?

You have three options, and the first one is already live

Every HaulHQ account has its own public page at yourname.haulhq.app. It takes quotes and bookings, shows your services and reviews, and runs the chatbot, with nothing to install. If you have no website, or your website is built on something that does not accept raw HTML, that page is your answer and you can stop reading here. The other two options are for putting HaulHQ inside a site you already run.

Option 1: use your HaulHQ page

Link to it from anywhere: your Google Business Profile, a button on your existing site, a text message, the side of the truck. It is finished, it is yours, and it cannot be mis-pasted. See Your HaulHQ page. If you want your own domain to reach it, see Point your domain at your HaulHQ page.

Option 2: use the WordPress plugin

The richest option. The free plugin renders your forms, booking, product list, reviews, gallery and service area directly into your WordPress pages, with search-engine markup and the floating chat launcher in the corner. If your site is WordPress, start at Install the WordPress plugin.

Option 3: paste an HTML embed

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 Settings > Website, on the HTML Embed 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. Set `product` to its slug.	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.haulhq.app/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. If you would rather the box grow to fit the form, paste this once anywhere on the same page:

<script>
(function () {
  var origins = ["https://yourname.haulhq.app","https://embed.haulhq.app"];
  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>

Optional. Lets every HaulHQ embed on the page size itself. Without it, the embed scrolls inside its box; both work.

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, use option 1 or 2 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.

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 Settings > Website > HTML Embed. 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.

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.haulhq.app/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.haulhq.app/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.haulhq.app/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.haulhq.app/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.haulhq.app/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. Set product to its slug.

<iframe
  class="haulhq-frame"
  src="https://yourname.haulhq.app/embed/product"
  title="Product"
  width="100%"
  height="560"
  style="width:100%;height:560px;border:0"
  loading="lazy"></iframe>

Single product. Replace yourname with your HaulHQ address.

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.haulhq.app/embed/reviews"
  title="Customer reviews"
  width="100%"
  height="640"
  style="width:100%;height:640px;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.haulhq.app/embed/gallery"
  title="Our recent work"
  width="100%"
  height="640"
  style="width:100%;height:640px;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.haulhq.app/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.haulhq.app/embed/service-area"
  title="Service area"
  width="100%"
  height="320"
  style="width:100%;height:320px;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. That is option 1 and it works everywhere.

"The form is cut off at the bottom."

The frame is shorter than the form and the optional script is not on the page. The form still scrolls inside its box, so nothing is lost, but if you want it to grow to fit, paste the script from the HTML Embed 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 *.haulhq.app, or use option 1.