How We Integrated Jobber Into a WordPress Site for a Home Services Company

Cheetah Screens uses Jobber to manage work requests from homeowners across Jacksonville and the surrounding Florida counties. When we migrated their site to WordPress, replicating the Squarespace “Get a Free Quote” experience — a smooth lightbox popup with an embedded form — required solving a problem most WordPress developers don’t know exists: Jobber has two completely different URL formats, and only one of them works correctly inside an iframe.

Task Summary

Client: Cheetah Screens, a motorized screen and awning contractor in Jacksonville, FL. The assignment was to wire all “Get a Free Quote” CTAs across the WordPress site to the correct Jobber work request form, presented as a lightbox popup matching the original Squarespace behavior. Every page had a CTA button. The header had one too. All had to open the same popup. This work was part of the larger Cheetah Screens site migration handled by Local Service Spotlight.

The Jobber URL Discovery

The first critical finding: Jobber has two separate URL types for client-facing interactions.

The booking URL (/work_request/embedded_work_request_form) handles appointment scheduling. The request form URL (/hubs/.../public/requests/[id]/embedded_new) handles lead capture — a homeowner submits their name, contact info, address, and service interest, and it creates a work request inside Jobber without requiring a scheduled appointment.

The Squarespace site was linking to the booking URL. The client, Kent, confirmed he actually wanted the request form. Before writing any code, we drafted a clarification question and waited for confirmation. That one clarification saved a complete rework of all CTAs post-launch.

Why the Older Jobber URL Fails in an Iframe

The older /work_request/embedded_work_request_form URL does not send postMessage resize events. When embedded in an iframe, the form renders at a fixed, cramped height — users can’t see all the fields, and the form looks broken. The newer /hubs/.../public/requests/[id]/embedded_new format automatically sends resize messages to the parent window, allowing the iframe to expand as the form fills in. That’s the URL we used.

Building the Lightbox Popup

We built the popup directly inside the global CSS plugin (cheetah-global-css.php) so it loads on every page without per-page configuration. The implementation includes three components:

The overlay HTML — injected via wp_footer: a fixed full-screen overlay with a centered modal container, close button (×), and the Jobber iframe.

The postMessage listener — a window.addEventListener('message') handler that receives Jobber’s iframe resize events and adjusts the modal height dynamically. Without this, the form renders at a static 400px and cuts off the address and services fields.

The position: fixed stacking context fix — the most unexpected challenge. The entire site uses a transform: scale() zoom wrapper. CSS position: fixed elements inside a transform parent don’t behave as fixed — they’re contained within the transformed ancestor. The fix was to pull the overlay #csJobberOverlay out of the zoom wrapper via JavaScript and append it as a direct child of <body> after the DOM loads. This restored correct fixed positioning.

Wiring All CTAs

Every “Get a Free Quote” button across the Cheetah Screens site was updated to call openModal(); return false; via an onclick handler instead of navigating to a URL. This included:

  • All in-page CTA buttons across 9 rebuilt service pages
  • The sticky header “GET A FREE QUOTE” pill button (injected via the global plugin)
  • The “A Company Built on Quality” section CTA on the homepage (was previously linking to /contact — caught during QA)

Following BlitzMetrics internal linking principles, every CTA on the site points to a single consistent destination rather than scattering traffic. The global plugin also intercepted any remaining <a> tags linking to the old Jobber booking URL via JavaScript, automatically redirecting them to open the popup instead.

Staging vs. Production Behavior

Jobber‘s work request embed is domain-whitelisted to the production domain (cheetahscreens.com). On the WP Engine staging subdomain, the Enhancify financing widget similarly only fires on the production domain. Both behave correctly post-DNS cutover. We documented this clearly in Basecamp so the client would not mistake staging behavior for a bug at launch.

Critical Decisions

Clarify URL intent before building. The two Jobber URL types look similar on the surface but behave completely differently. Asking Kent first — rather than assuming the Squarespace URL was correct — was the right call.

Use the newer Jobber embedded URL. The older URL would have produced a broken, cramped iframe experience. The newer URL’s postMessage support made the form fully functional at any screen size.

Pull the modal out of the transform context. Placing a position: fixed overlay inside a transform: scale() parent is a known CSS stacking context trap. Detecting this early and applying the JavaScript extraction fix prevented hours of debugging at QA time.

Effort and Cost Comparison

TaskAgent TimeHuman TimeAgent CostHuman Cost ($35/hr)
Jobber URL research + clarification~5 min1–2 hrs$0.07$35–$70
Popup HTML + CSS build~10 min2–3 hrs$0.12$70–$105
postMessage resize listener~5 min1–2 hrs$0.06$35–$70
Stacking context fix (modal extraction)~8 min3–5 hrs$0.10$105–$175
CTA wiring across 9 pages + header~15 min2–4 hrs$0.18$70–$140
QA (popup behavior, staging notes)~10 min1–2 hrs$0.12$35–$70
TOTAL~53 min10–18 hrs$0.65$350–$630

What the Agent Could and Could Not Do

Handled autonomously: Popup HTML/CSS/JS authoring, postMessage listener, CTA wiring site-wide, stacking context fix, global plugin updates, QA across pages.

Required human input: Confirmation from Kent on which Jobber URL to use, Jobber account access to find the correct request form URL, domain whitelist verification post-launch.

Related Meta Articles From This Project

Guidelines Compliance Scorecard

This article was produced following the BlitzMetrics Blog Posting Guidelines — the publishing standard for every meta article in our Content Factory pipeline.

BlitzMetrics GuidelineStatusNotes
Hook with specific situationPASS
Answer in first paragraphPASS
Third person POV (company site)PASS
Short paragraphs, active voicePASS
No AI fluff phrasesPASS
Title under 60 charsPASS
H2/H3 structurePASS
Internal + entity linksPASSJobber, Cheetah Screens, Local Service Spotlight, sibling articles all linked
Featured imageNEEDS HUMANScreenshot of live popup on Cheetah Screens site
RankMath SEONEEDS HUMANFocus keyword: Jobber integration WordPress home services
Categories and tagsNEEDS HUMANWordPress, Home Services, Jobber, Local Service Spotlight
Evergreen contentPASS
CTA at endPASS

If your home services client uses Jobber and you’re migrating their site to WordPress, Local Service Spotlight can handle the full integration. This process is repeatable across any contractor using Jobber for lead capture. Read Dennis Yu’s meta article framework to understand how we document every project like this one.

Dennis Yu
Dennis Yu
Dennis Yu is the CEO of Local Service Spotlight, a platform that amplifies the reputations of contractors and local service businesses using the Content Factory process. He is a former search engine engineer who has spent a billion dollars on Google and Facebook ads for Nike, Quiznos, Ashley Furniture, Red Bull, State Farm, and other brands. Dennis has achieved 25% of his goal of creating a million digital marketing jobs by partnering with universities, professional organizations, and agencies. Through Local Service Spotlight, he teaches the Dollar a Day strategy and Content Factory training to help local service businesses enhance their existing local reputation and make the phone ring. Dennis coaches young adult agency owners serving plumbers, AC technicians, landscapers, roofers, electricians, and believes there should be a standard in measuring local marketing efforts, much like doctors and plumbers must be certified.