Take proposal requests on your own website

A small form, hosted by HOAcrew, that appears inside a page on your own website. A visitor fills in their name, how to reach them, and what their community needs. You get the request in your console under Settings, Website plugin, and you reply to them directly with a proposal. HOAcrew does not sit between you and that conversation.

It is included with HOAcrew+, there is no charge per request, and there is no limit on how many pages you put it on.

You need three things, and you probably have all of them:

• A live HOAcrew+ term on your company. If you do not have one, the plugin page in your console starts it and issues your key in the same press.
• Your company’s admin login for HOAcrew. A technician login can read the requests that arrive but cannot decide which websites carry the form.
• The ability to add a block of HTML to a page on your site. Every platform below has one; the instructions say where it is.

1. 1

   Open the plugin page in your console

   Sign in and go to Settings → Website plugin.

2. 2

   Type the web address your site lives at

   Type it exactly as it appears in the browser bar — for example acme-lawns.com. To a browser, acme-lawns.com and www.acme-lawns.com are two different addresses, so adding one offers you the other. Add both if your site answers on both.

   You can register up to 10 addresses on one key, which is room for a live site, a staging site and a couple of landing pages.

3. 3

   Press the button and copy the key

   You get a key that starts with hoac_embed_. It is meant to be public — it goes into your page’s HTML where anyone can read it. What stops somebody else using it is the list of addresses you just registered: a browser refuses to show your form on any site that is not on it.

This is the snippet. It is the same everywhere — what changes is where you paste it, and that is what the guide for your platform is for.

<div data-hoacrew-proposal-form data-key="hoac_embed_your_key_here"><a href="https://hoacrew.com/embed/w/hoac_embed_your_key_here">Request a proposal</a></div>
<script src="https://hoacrew.com/embed/v1.js" async></script>

Pick the one you are on:

On something else? The plain HTML guide has a complete worked example, and every platform that lets you paste a block of HTML behaves the same way.

Every key also has a plain web address that opens the same form as a full page. Put it behind a button, in an email signature, on a Google Business profile, or on a page you cannot add code to. It needs no plan, no code block, and no addresses registered.

https://hoacrew.com/embed/w/hoac_embed_your_key_here

Requests from it arrive in your console exactly like the ones from the embedded version. It is also what a visitor is shown automatically if the embedded form cannot load for any reason, so nobody is ever left looking at a blank space.

Everything is set with an attribute on the <div>. All of them are optional; the form works with none of them.

All of them together look like this:

<div data-hoacrew-proposal-form data-key="hoac_embed_your_key_here" data-service="Landscaping" data-heading="Get a proposal for your community" data-theme="light" data-accent="#1f7a4d"><a href="https://hoacrew.com/embed/w/hoac_embed_your_key_here?service=Landscaping&amp;heading=Get%20a%20proposal%20for%20your%20community&amp;accent=%231f7a4d">Get a proposal for your community</a></div>
<script src="https://hoacrew.com/embed/v1.js" async></script>

The text on the send button is set to whichever of near-black or white reads better on the color you chose, so a dark green or a pale yellow both end up with a button somebody can read.

When a request is sent, the element fires a bubbling hoacrew:proposal-request-sent event you can listen for. It carries no visitor data at all — not a name, not an email — only the fact that a request went through, so adding a conversion tag never turns your tag manager into a holder of somebody else’s contact details.

document.addEventListener('hoacrew:proposal-request-sent', function () {
  // your own conversion tracking here
  if (window.gtag) window.gtag('event', 'generate_lead');
});

In React or Next.js the same listener goes in an effect — the React guide has it written out with the cleanup.

• On arrival: a form with their name, email, phone, community name, property address, what they need, and a message box. Only the name and one way to reach them are required.
• While sending: the button reads Sending and cannot be pressed twice.
• On success: the form is replaced by a short confirmation naming your company. Nothing redirects, nothing pops up.
• If they miss a field: one sentence saying which one, above the form, with everything they typed still in the boxes.
• If the page has been open a long time: after 30 minutes the form asks them to reload before sending. Their text stays in the boxes while they do.
• If their connection drops: one sentence, and the button comes back so they can try again.

The short version, and then the page to forward to whoever asks for the long one.

• Your key is public, and that is fine. It ships in your page’s HTML. It can do exactly one thing: create a proposal request for your company. It reads nothing at all.
• Only your addresses can display it. Every time the form loads, we tell the browser which addresses may show it, and the browser enforces that. A site that is not on your list never receives the form; its visitors get a button to your hosted form instead, and anything they send from it still arrives addressed to you.
• The form is not in your page. It sits in a frame on our side of a boundary the browser enforces, so the other scripts on your page — analytics, chat, a plugin from 2019 — cannot read what a visitor types, and our frame cannot read your page.
• Automated submissions are filed, not binned. Two checks run, neither needing a puzzle from your visitors. Anything that trips one is recorded under Filtered as spam, where one press moves it back — a real customer is worth more than a tidy inbox.
• What is recorded: what they typed, which of your addresses they were on, and the time. Their IP address is not stored — a one-way fingerprint of it is. No cookies, no tracking.
• No email is sent. Not to you, not to the visitor. The request appears in your console, which cannot bounce and needs nobody’s mail server to be working.

The full security model covers what the address list does and does not stop, what bounds a request sent directly rather than through a browser, and where the honest edges are. It is written to be forwarded.

One cause accounts for most of these and it produces no error message anywhere: the address you are viewing is not one you registered. Copy the address out of your browser bar, compare it with the list on the plugin page, and check www. against the bare name in both directions. The plugin page keeps the last few addresses it turned away under Sites we turned away, with a button to add one, so it will often have worked it out before you do.

The blank-form page has the two-minute check, then every other cause in the order it is usually the answer — a builder that stripped the script tag, a revoked key, a security policy on your own site, and the three console messages worth recognizing.

One thing worth knowing before you test: a submission completed in under 4 seconds is filed under Filtered as spam, and a test typed by somebody who already knows what every box says is the fastest submission the form will ever see. Look there before concluding it did not arrive.

Adding or removing an address takes effect on the next page load; you do not touch your website again. Changing the heading, the color or the preselected service means copying the snippet again, because those live in the snippet.

Turning the key off stops the form appearing anywhere, immediately. Every request it collected stays in your console — those are your customers and burning a key never takes them with it. If your HOAcrew+ term has ended you can still turn a key off; what needs a live term is issuing one, adding an address, or replacing one.