Add the form to Shopify

This is the code. Replace hoac_embed_your_key_here with the key from your console. That is the only edit it needs.

<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>

Two lines: the place the form goes, and the script that puts it there. The link inside the first line is a plain one to your hosted form, and it is what a visitor gets if the script never arrives — a browser with scripting off, a corporate proxy, a blocker. The loader clears it the moment it runs, so nobody sees both. That wording is yours: change Request a proposal to whatever you would rather it said and nothing else is affected.

1. 1

   Open the theme customizer

   In your Shopify admin, go to Online Store → Themes and press Customize on your live theme.

2. 2

   Switch to the page you want

   Use the page selector along the top to move off the home page and onto the page the form belongs on — a Contact or Services page, usually under Pages.

3. 3

   Add the section

   In the left panel press Add section and choose Custom Liquid. It appears at the bottom of the page; drag it up the list to where you want it.

4. 4

   Paste and save

   Paste the snippet into the Liquid code box on the right and press Save. The customizer preview may or may not render it; the live page is the one that counts.

Every Shopify store has two addresses: the domain you sell under, and a built-in one ending in .myshopify.com. Shopify’s own preview links use the built-in one, so a form that works perfectly on your real domain shows nothing in a preview unless you have listed both.

List your selling domain, with and without www. if both work. Add the .myshopify.com address while you are setting things up if you want previews to work, and remove it afterwards if you would rather keep the list short.

1. Open the live page on your selling domain, in a normal browser tab.
2. The form is there with your company’s name on it. Send a test, taking more than a few seconds over it: a submission completed unusually fast is filed as suspected spam.
3. Open Settings → Website plugin in your HOAcrew console. Your test is in the list.

Most websites have no Content-Security-Policy and this section does not apply to them. If yours has one — a security plugin added it, your host sets it, or whoever built the site wrote one — it needs to allow two things from us:

script-src  https://hoacrew.com
frame-src   https://hoacrew.com

The first lets the loader script run. The second lets the form’s frame render. Allow the first and forget the second and you get a blank space where the form should be, with a line in the browser’s developer console naming frame-src. Nothing else is needed: the form loads no fonts, no analytics and no other company’s code, so there is no third allowance hiding behind these two.

On Shopify a policy usually arrives with an app rather than from the theme — security and headers apps are the common source. If the form is missing and the browser’s developer console names a policy, the app that added it is where the two allowances go. Turning that app off for a moment is the quickest way to confirm it is the one responsible.

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

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

It is the same form, sending to the same place, and requests from it arrive in your console exactly like the ones from the embedded version.

In Shopify that is an ordinary link in any page’s rich-text editor, or a button in a section that offers one. It needs no addresses registered and no Custom Liquid section, because a link opens the form as its own page rather than displaying it inside yours.

Back to the overview, the options and the events