Help center › Website widget
For owners · Pro and up
Put the visualizer on your website.
Visitors photograph their window, see it in your products and send you a quote request. Each request lands in your CRM as a lead. It takes about 10 minutes. The website visualizer is on the Pro and Commercial plans.
Updated
1. List your website
Browsers show the widget only on the sites you list. Do this first.
- Open Admin › Website.
- Under Allowed sites, type your website's address starting with https://, one per line.
- Add both versions:
https://www.yourcompany.comandhttps://yourcompany.com. - Wait for Saved. The list saves by itself.
To allow every subdomain, use https://*.yourcompany.com. Up to 20 sites.
2. Copy your code
Under Embed code on Admin › Website there are three choices. Each has a Copy button.
- Option B: script (fits the page width). Best for most sites. Two short lines.
- Option A: iframe. One line. Use it when your site builder only takes an iframe.
- Direct link. A web address for a button, an email or a social post. Works everywhere, no code.
Paste the code where the visualizer should appear, on a page like "Design your windows" or "Free quote". Steps for each builder are below.
3. WordPress
- Open the page in the WordPress editor.
- Click + (Block Inserter) where the visualizer should go.
- Choose Custom HTML.
- Paste Option B.
- Click Update (or Publish).
- Open the live page and check the visualizer shows.
- Self-hosted WordPress: sign in as an Administrator. Other roles can have the script removed when the page saves.
- WordPress.com: scripts and iframes need a paid plan with plugins turned on. On the free plan, use the Direct link on a button instead.
4. Wix
Wix puts embedded code inside its own box. The simplest way is to embed the visualizer's Direct link.
- Open your site in the Wix Editor and go to the page.
- Click Add Elements on the left.
- Click Embed Code, then Embed a site.
- Click the new box, then Enter Website Address.
- Paste your Direct link under "What's the website address?".
- Click Apply.
- Drag the box to about 520 pixels wide and 720 tall, then Publish.
In the newer Wix Harmony editor the field is called Link. Box stays blank on the live site? See The widget does not show, and use the Direct link on a button meanwhile.
5. Squarespace
Code with a script needs the Core, Plus or Advanced plan. On other plans, put the Direct link on a button.
- Edit the page.
- Click Add block (or +) where the visualizer should go.
- Choose Code.
- Click the pencil icon on the new block.
- Set Mode to HTML.
- Paste Option B. Leave Display Source off.
- Save, then open the live page logged out to check it. Code blocks may not run while you are logged in.
6. GoDaddy Website Builder
- Open your GoDaddy products page.
- Next to Websites + Marketing, click Manage for your site.
- Edit the site and go to the page.
- Add a section, search for HTML and click Add.
- Paste Option A (the iframe) into Custom Code.
- Type 740 in Forced Height so the widget is not cut off. Never enter 0: it deletes the section.
- Click Preview to check it, then Publish.
GoDaddy places custom code inside its own box. If it stays blank, see The widget does not show, and use the Direct link on a button meanwhile.
7. Shopify
General guidance: these steps work on most Online Store 2.0 themes, but section names vary by theme.
- In Shopify admin, go to Online Store.
- Click Edit theme (or Customize).
- Pick the page from the drop-down at the top.
- In the sidebar, click Add section.
- Choose Custom Liquid.
- Paste Option B into its code box.
- Click Save.
No Custom Liquid section in your theme? Send the code to your web person, or put the Direct link on a button.
8. Send it to your web person
- Click Copy under Option B on Admin › Website.
- Paste it into an email with the message below.
- Ask them for every address the site uses (with and without www), and add those to Allowed sites.
"Please add this code to our website on a page called Design your windows (or our quote page), where the content goes. It loads a window visualizer from HeadRail in a frame that fits the page width. If our builder strips scripts, the one-line iframe version is in our HeadRail account too. Then tell me every address the site loads from, with and without www."
9. The widget does not show
- Check Allowed sites lists the exact address in your browser's address bar, with https:// and with or without www.
- Open the live page in a private window, logged out of your builder.
- Check the code is still on the page. Some builders remove scripts on save; then use Option A.
- Still blank? Email admin@getheadrail.com the page's address. We look and tell you what to add.
Visitors see a quote form instead of a preview? Your website previews for the month are used up, or turned off. Leads still come in. See Admin › Usage.
10. Offer pop-up and visitor tracking
Both use the same code, and both are on Admin › Website.
- Offer pop-up: tick Show the offer pop-up and write your offer. Visitors who ask for it get it by email with their own code and become leads.
- Visitor tracking: tick Track website visitors, then add the one-line code shown there to every page (in the footer). Pages that already have Option B don't need it. Keep Ask visitors first on unless your privacy policy covers it.
Want us to check it?
Email admin@getheadrail.com with your website address. We reply within 1 business day.