Quickstart: Squarespace
Install the QuoteForce widget on your Squarespace site in 5 minutes. Paste one script tag into a Code Block, configure your service area, take a test submission.
On this page
- A QuoteForce account (free tier is fine).
- A Squarespace site (Business plan or higher — Code Blocks require Business).
- 5 minutes.
Step 1: Create your QuoteForce account
Sign up at quoteforce.io. The free tier gives you the widget, satellite measurements, geofence, and email delivery, no card required. Verify your email and complete the operator onboarding (business name, service list, base pricing). Onboarding takes about 3 minutes if you already know your prices.
When onboarding finishes, you land on the dashboard. The first thing you'll see is a "Get your embed code" panel at the top.
Step 2: Get your embed code
From the dashboard, open Settings → Embed. The embed code is a single script tag with your tenant ID baked in. Copy the entire tag to your clipboard. It looks like this:
<script src="https://app.quoteforce.io/embed.js" data-tenant="your-tenant-id" async> </script>
The data-tenant attribute is unique to your operator account. Don't share it publicly. If you accidentally publish your tenant ID, rotate it from Settings → Embed → Rotate tenant ID (one click; old script tags stop working immediately).
Step 3: Paste into Squarespace Code Block
QuoteForce installs as a Squarespace Code Block. Code Blocks render arbitrary HTML on any page; they're the official Squarespace path for embedding third-party widgets.
- Open your Squarespace editor and navigate to the page that should display the widget (usually your Contact, Quote, or Services page).
- Click the insertion point where the widget should appear, then select Add Block → Code (the icon labeled
</>). - Paste the embed script tag from Step 2 into the Code Block.
- Click Save. The widget renders on Save and on every subsequent page load.
The widget inherits your page width by default. If your Squarespace section is constrained to 600 pixels, the widget will be 600 pixels wide. If you want a full-bleed widget, add the Code Block to a full-width section.
Step 4: Configure your service area
Before you go live, draw your service area polygon. From the QuoteForce dashboard, open Settings → Service Area. You'll see a Leaflet map centered on your business address. Click to place polygon vertices around the neighborhoods or cities you serve, then Save.
Any submission from outside your polygon will be rejected with a polite "outside our service area" message and won't reach your inbox. See the full geofence documentation for advanced setups (multiple polygons, weekly digest of out-of-area attempts, drive-time considerations).
Step 5: Test a submission
Open your published Squarespace page on your phone (not the Squarespace preview — the live URL). Submit a real address inside your service area. Within 60 seconds you should see:
- An estimate email in your customer test inbox.
- A new lead in the QuoteForce dashboard with the satellite snapshot, square footage, and calculated price attached.
- A session recording in the dashboard's Recordings tab (click play to watch the form fill-out in real time).
If all three appear, you're live. Switch your customer-facing site over and start watching the leads roll in. Most operators see their first real-customer quote within 24 hours of installation.
Troubleshooting
Script tag not loading
Squarespace's Personal plan doesn't allow Code Blocks. If the script tag isn't rendering, check your plan tier at Settings → Billing & Account. You need Business or higher. Upgrade is instant; no need to reinstall the widget after upgrading.
Estimates not arriving
Check your spam folder first; Gmail occasionally flags new sender domains for the first few days. Then verify the email address attached to your operator account at Settings → Profile. If both look right, contact support from the dashboard and we'll trace the delivery in the logs.
Geofence rejecting valid leads
Most often this is a polygon-drawing issue: the polygon doesn't actually include the address you tested. Open Settings → Service Area, click the "Preview test address" tool, and paste the address. The tool will tell you whether the polygon currently contains it and where the nearest polygon edge is. Adjust the polygon vertices and re-save. See the geofence guide for more.
Widget styling doesn't match my site
The widget uses your brand color, logo, and typography pulled from Settings → Brand. If your widget looks generic, you probably haven't filled in the Brand settings yet. The widget re-renders with your brand on the next page load after you save.
Next steps
You're live. The next thing most operators do is read the comparison against a static contact form to understand what's different about the lead flow, and the geofence guide to dial in their service area boundaries.
From there, set up door-hanger QR campaigns, customize your email templates, and connect your CRM via webhooks. Each capability has a dedicated guide in the Capabilities section of the sidebar.