How to install the Instaquote widget

Get Instaquote on your website in three steps

Instaquote sits on your website and answers enquiries for you. It quotes from your own rates, and customers can send you booking requests to approve.

Getting it on your site takes three simple steps. You don't need to be technical. Just follow along.

Step 1: Choose how it shows, then copy your code

1. Log in to your Instaquote console.
2. Go to the "Install & origins" page.
3. Under "How should it show on your site?", leave "Chat bubble (recommended)" selected. This puts a small chat button in the bottom-right corner of every page. (The other choice, "Inline on a page", puts the chat box right where the code sits on your page.)
4. Click "Copy code".

Setting up for the first time? You'll see the same choice during sign-up, where the button is called "Copy snippet". It's the same code.

Already copied your code before? You don't need to copy it again. Your old code keeps working, and shows the chat inline (in the page). If you'd like the corner bubble instead, pick "Chat bubble (recommended)", copy the new code and swap it in.

What the code looks like

Your code is two short lines. With the bubble, it looks like this:

<div id="instaquote" data-firm-id="YOUR_FIRM_ID" data-api-url="https://api.instaquoteai.app" data-mode="chat" data-locale="en-AU" data-environment="production" data-firm-name="Your Business" data-embed="bubble"></div>
<script src="https://widget.instaquoteai.app/v1/widget.js" defer></script>

The inline version is the same, just without data-embed="bubble" at the end of the first line.

Don't type this out. It's only an example. Your own code has your business details in it, so always use "Copy code" in your console and paste that.

Step 2: Paste it once, site-wide, at the end of the page

Your code goes on every page of your site, at the very end of the page. In web speak, that's "the end of the body", just before the closing </body> tag.

Most website builders have one spot that covers the whole site. It's usually called something like Footer code, Body end or End of body. The exact steps for your builder are below.

A few simple rules:

• Paste it once, for the whole site. Not on each page, and not twice. If the code ends up on a page more than once, the chat can load twice.
• End of the body or footer area only. Never in the theme header.
• Paste it exactly as it is. Don't change anything.
• Don't use an "Embed HTML" or "HTML" box on a page. These put the code in a sealed box (an iframe), and the chat won't work in there.
• Save, then publish your site.

Step 3: Check your site is on the "Sites" list

Instaquote only works on websites you've approved. This keeps your chat on your own site.

1. In your Instaquote console, go to the "Install & origins" page.
2. Look at the "Sites" list. The line at the top shows how many sites are live, how many are allowed but never seen, and how many are being blocked.
3. Make sure every address your site runs on is listed.
4. If one is missing, go to "Add a site", type in the full address (like https://www.yourbusiness.com.au), then click "Add site".

Things to know about addresses:

• The address has to match exactly. That includes the https:// part, and the port if there is one.
• www and non-www count as two different sites. If people can reach your site at both https://yourbusiness.com.au and https://www.yourbusiness.com.au, add both.
• Each subdomain needs its own entry. Adding yourbusiness.com.au doesn't cover shop.yourbusiness.com.au.
• On a builder's free address? Add the full address. If your site lives on an address from your builder, such as framer.website, myshopify.com, mystrikingly.com or square.site, add the whole thing, for example https://yourname.mystrikingly.com. (Free Wix addresses ending in wixsite.com can't run the code at all. See the Wix steps.)

If your site tries to load the chat and it isn't on the list, it shows as "Being blocked" in the "Sites" list. You'll also see a banner like "One site is loading the widget and being blocked". If it's your site, click "Add this site" next to it.

New sites can take up to a minute to start working. (You'll see this in the "Two things worth knowing" box on the same page.)

How to check it's working

1. Make sure your site is published.
2. Wait about a minute.
3. Open your live website in a private window. (In Chrome, that's an Incognito window. In Safari, it's a Private window.) Don't use your builder's editor or preview. The chat won't show there.
4. Look for the chat bubble in the bottom-right corner. (If you chose "Inline on a page", look for the chat box near the bottom of the page.)
5. Click it and ask a test question, like "How much to replace a hot water system?" or "Can you quote for painting a three-bedroom house?"

If it answers, you're all set. If not, jump to Troubleshooting.

Rather have a hand? Book a free 15-minute setup call and we'll walk through it with you: tryinstaquote.com/contact. Or email us at support@instaquoteai.app.

Step-by-step guides for your website builder

Not sure which builder your site uses? Ask whoever set it up, or check your login emails for names like WordPress, Wix or Squarespace.

Jump to: WordPress · Wix · Squarespace · Shopify · Webflow · Square Online · Framer · Carrd · Strikingly · Can't add code?

WordPress

There are a few ways to add your code to WordPress. Pick the one that matches your site.

• Got Elementor Pro? Use the Elementor Pro steps.
• Using the Divi theme? Use the Divi steps.
• On WordPress.com? Start with the WordPress.com steps.
• Not sure, or none of the above? Use WPCode. It's free and works on almost any WordPress site.

Whichever you use, add the code in one place only. If you've already added it another way, remove the old copy first.

Option A: WPCode (free plugin)

1. Log in to your WordPress dashboard.
2. Go to Plugins > Add New. Search for WPCode, then click Install Now and Activate.
3. In the left menu, go to Code Snippets > Header & Footer.
4. Paste your Instaquote code into the Footer box. Leave the Header and Body boxes alone.
5. Click Save Changes (top right of the page).
6. If you use a caching plugin (like WP Rocket, W3 Total Cache or LiteSpeed Cache), clear the cache.

Plan needed: none. WPCode is free.

Done? Check it's working.

Option B: Elementor Pro

You need Elementor Pro (the paid version) for this. On the free version, use WPCode instead.

1. Log in to your WordPress dashboard.
2. Go to Elementor > Custom Code.
3. Click Add New Custom Code.
4. Give it a title, like "Instaquote".
5. Set Location to </body> - End.
6. Paste your Instaquote code into the code box.
7. Click Publish. When asked for conditions, choose Entire Site, then save.
8. Clear your cache if you use a caching plugin.

Done? Check it's working.

Option C: Divi theme

1. Log in to your WordPress dashboard.
2. Go to Divi > Theme Options.
3. Click the Integration tab.
4. Make sure Enable body code is switched on.
5. Paste your Instaquote code into the box called Add code to the < body >. Don't use the head box.
6. Click Save Changes.
7. Clear your cache if you use a caching plugin.

Done? Check it's working.

Option D: WordPress.com

WordPress.com (where WordPress hosts your site for you) only allows this kind of code on a paid plan. The free plan won't work.

1. Make sure your site is on a paid plan. If WordPress asks you to activate hosting features, say yes.
2. Install the free WPCode plugin (Plugins > Add New, search "WPCode", then install and activate).
3. Follow the WPCode steps from step 3.

Done? Check it's working.

Wix

Use Wix's Custom code setting for this. Don't use Wix's "Embed HTML" element. It puts the code in a sealed box (an iframe), and the chat won't work in there.

Before you start: Wix only runs custom code on a published site with a connected domain (like yourbusiness.com.au), and connecting a domain needs a Premium plan. A free site on a yourname.wixsite.com address can't run the code.

On a free Wix site? First upgrade to Premium and connect your own domain. Then add your site's address, for example https://www.yourbusiness.com.au, to the "Sites" list on the "Install & origins" page.

1. Go to your site's Wix dashboard.
2. Click Settings.
3. Under Development & integrations, click Custom code.
4. Click + Add Custom Code (top right).
5. Paste your Instaquote code into the box.
6. Name it something easy, like "Instaquote".
7. Under Add Code to Pages, choose All pages, and choose to load the code once (not on each new page).
8. Under Place Code in, choose Body - end.
9. Click Apply.

Good to know:

• Pick "Chat bubble (recommended)" when you copy your code. It's the best fit for Wix.
• The chat won't show in the Wix editor or preview. Check your live site instead.
• If the chat disappears after you click from page to page, refresh the page and it'll come back.
• Make sure your site's address (like https://www.yourbusiness.com.au) is on your "Sites" list, exactly as people visit it.
• Wix ties your custom code to your domain. If you ever change your primary domain, Wix deletes the code, so you'll need to add it again.

Done? Check it's working.

Squarespace

Plan needed: Core, Plus or Advanced (or some older plans). The Basic plan doesn't allow code.

1. Log in and open your site.
2. Go to Website > Website Tools > Code Injection.
3. Paste your Instaquote code into the Footer box. Leave the Header box alone.
4. Click Save.

The chat won't show in the Squarespace editor. Check your live site.

Done? Check it's working.

Shopify

Plan needed: any paid Shopify plan with an online store. If you're using a paid theme on a free trial, you'll need to buy the theme before you can edit its code.

1. From your Shopify admin, go to Online Store > Themes.
2. Next to your current theme, click the ... button, then Edit code.
3. In the Layout folder, open theme.liquid.
4. Find </body> near the bottom. (Press Ctrl+F on Windows or Cmd+F on Mac to search.)
5. Paste your Instaquote code on a new line just above </body>. Don't delete anything else, and don't paste it up in the <head> part.
6. Click Save.

Good to know:

• If you update your theme to a new version, Shopify may remove code you've added. After any theme update, check the chat is still there.
• If customers visit your store on its myshopify.com address, add the full address (like https://yourstore.myshopify.com) to your "Sites" list.

Done? Check it's working.

Webflow

Plan needed: a paid Site plan, or a paid Core, Growth, Agency or Freelancer Workspace.

1. Open your project and go to Site settings.
2. Click the Custom code tab.
3. Paste your Instaquote code into the Footer code box. Leave the Head code box alone.
4. Click Save changes.
5. Publish your site.

If people visit your site on its webflow.io address, add that full address to your "Sites" list too.

Done? Check it's working.

Square Online

Plan needed: Square Online Plus or Premium.

1. Sign in to your Square Dashboard.
2. Go to Channels > Square Online.
3. Select Settings > Tracking Tools.
4. Select Add new code.
5. Give it a name, like "Instaquote", and paste your Instaquote code.
6. Choose End of body.
7. Select Save.
8. Publish your site from the site editor.

If your site is on a square.site address, add the full address (like https://yourbusiness.square.site) to your "Sites" list.

Done? Check it's working.

Framer

Plan needed: you may need a paid Framer plan to use custom code. If you can't see the Custom Code settings, check your plan with Framer.

In short: go to Project Settings, then Custom Code, and put the code at the End of <body>.

1. Open your project in Framer.
2. Open Project Settings. (In older versions of Framer this is called Site Settings.)
3. Click Custom Code.
4. Click Add Script (or the + icon if you've added code before).
5. Name it "Instaquote" and paste your Instaquote code.
6. For placement, choose End of <body>.
7. Make sure it runs on all pages. If Framer asks how often it should run, choose Once.
8. Publish your site.

Good to know:

• Pick "Chat bubble (recommended)" when you copy your code. It's the best fit for Framer.
• Custom code only runs on your published site, not in the canvas preview. Publish first, then test on your live site.
• If the chat disappears after you click from page to page, refresh the page and it'll come back.
• If your site is on a framer.website address, add the full address (like https://yourname.framer.website) to your "Sites" list.

Done? Check it's working.

Carrd

Plan needed: Carrd Pro Standard or higher.

1. Open your site in the Carrd builder.
2. Click Add Element, then Embed.
3. Set Type to Code.
4. Paste your Instaquote code into the Code box.
5. Set Style to Hidden, then choose Body End.
6. Publish your site.

The embed won't show anything inside the builder. That's normal. Check your published site. If people visit your site on a carrd.co address, add that full address to your "Sites" list.

Done? Check it's working.

Strikingly

Plan needed: Strikingly Pro or VIP.

1. Open your site in the Strikingly editor.
2. Click Settings, then Advanced (you may need to click Show Advanced).
3. Click Custom Code.
4. Paste your Instaquote code into the Footer code box.
5. Save your changes, then publish your site.

If your site is on a mystrikingly.com address, add the full address (like https://yourname.mystrikingly.com) to your "Sites" list.

Done? Check it's working.

Can't add code to your site?

Some website builders only let you add code inside a box on one page. That box is a sealed or separate frame (an iframe). Instaquote's site check refuses to run in there, and the chat bubble gets stuck inside the box. So these don't work:

• GoDaddy's website builder HTML sections
• Google Sites embeds
• Wix's "Embed HTML" element (on Wix, use Custom code instead)

If your site runs on WordPress through GoDaddy hosting, that's different. Use the WordPress steps.

What to do

The easiest fix is to email whoever looks after your website. They can tell you your options, which might mean moving to a builder that lets you add code to the whole site. Or book a free 15-minute setup call and we'll talk it through with you: tryinstaquote.com/contact

Copy-ready email

Copy this, add your code where it says, and send it to whoever looks after your website.

Get an AI assistant to walk you through it

Stuck on a step? An AI chat assistant can walk you through it for your exact builder.

Copy the prompt below. Fill in your website builder and paste your code where it says. Then paste the whole thing into the AI chat.

I need step-by-step help installing a chat widget on my business website.

My website builder is: [YOUR BUILDER, e.g. WordPress with Elementor, Wix, Squarespace]

Here is my widget code:
[PASTE YOUR INSTAQUOTE CODE HERE]

Please give me simple, numbered, click-by-click instructions for my builder. Assume I'm not technical. Follow these rules:

1. The code must go on the site ONCE, site-wide, at the end of the body (just before the closing </body> tag) or in the site-wide footer code area. Never in the theme header.
2. Do NOT tell me to put it in a single page section, an iframe, or an "Embed HTML" or HTML block on one page. On Wix, use Settings > Custom code, All pages, Body - end, load once.
3. Tell me to paste the code exactly as it is, without changing anything.
4. Tell me to save and re-publish the site afterwards.
5. Remind me to add every exact web address my site runs on (including https://, and both www and non-www if both work) to the "Sites" list on the "Install & origins" page in my Instaquote console.
6. Tell me it can take up to a minute to start working, and that it won't show in my builder's editor or preview.
7. Finish by telling me to open my live site in a private (incognito) window, find the chat, and ask it a test question.

If my builder or plan doesn't allow site-wide code, tell me that clearly and suggest what to do instead.

Troubleshooting

The chat isn't showing

Check these, in order:

• Is your site published? Code changes only go live after you publish.
• Are you looking at the editor or a preview? The chat won't show in builder editors or previews. Open your live site in a private window instead.
• Is your site on the "Sites" list? Check the "Install & origins" page. If your site shows as "Being blocked", click "Add this site". Then wait a minute and reload.
• Does the address match exactly? www and non-www are different sites, and each subdomain needs its own entry.
• Do you use a caching plugin? On WordPress, clear your cache (WP Rocket, W3 Total Cache, LiteSpeed Cache and so on), then check again.
• Is your plan high enough? Some builders only allow custom code on paid plans. Check the plan notes for your builder.
• Did you paste it in the right spot? It needs to go in the site-wide footer code or end of body area. Not the theme header, and not a page section or "Embed HTML" box.

The chat shows on one page, then disappears when I click around

Some builders (like Wix and Framer) change pages without fully reloading them. The chat looks for its spot once, when the page first loads, so it can disappear until the page is refreshed. To help:

• Use "Chat bubble (recommended)".
• On Wix, set the code to load once, on all pages, in Body - end.
• On Framer, put it in End of <body>.
• A refresh brings the chat back.

The chat shows up twice, or acts strangely

The code is probably on your site more than once. Check your builder's footer code, body end and page settings, and any plugins, and remove the extra copies so it's pasted only once, site-wide.

The chat sits in the page, not in the corner

Your code is the inline version. This is normal if you copied your code before the bubble choice was added. To switch:

1. In your Instaquote console, go to "Install & origins".
2. Under "How should it show on your site?", pick "Chat bubble (recommended)".
3. Click "Copy code".
4. Replace the old code on your site with the new code. (Replace it, don't add a second copy.)
5. Publish your site and check again.

Still stuck?

Email us at support@instaquoteai.app, or book a free 15-minute setup call and we'll sort it out with you: tryinstaquote.com/contact

Advanced: for web developers (Content Security Policy)

Most sites don't have a Content Security Policy (CSP), so skip this if you're not sure. If your web developer has set one up, ask them to allow these:

You don't need 'unsafe-inline'.

Only if you have card payments turned on in Instaquote, also allow:

If you don't have card payments turned on, you don't need any of the Stripe entries.

Using an older snippet? If your code loads instaquoteai.app/widget.js (not widget.instaquoteai.app/v1/widget.js), allow https://instaquoteai.app in place of https://widget.instaquoteai.app.