All docs

Documentation

Embedding the Booking Form

Add the PestBooker booking form to your website

Embed the PestBooker booking form directly on your website so customers can book without leaving your site. The embed script loads the form in a responsive iframe, automatically handles resizing, and forwards analytics events to your page for conversion tracking. UTM parameters and ad click IDs are captured automatically from your page URL.

Requirements

  • A PestBooker account with a configured booking page
  • Access to edit your website HTML (or a CMS that allows custom code blocks)
  • Your booking page URL from Dashboard → Settings → Booker
1

Get Your Embed Code

  • Go to Dashboard → Settings → Booker
  • Copy the embed code snippet provided
  • The snippet includes a <div> container and the embed.js script
  • Each snippet is pre-configured with your unique booking page URL
2

Add the Embed Code to Your Website

  • Paste the embed snippet into the HTML of the page where you want the form to appear
  • Place it inside a container element where the form should render
  • The iframe will expand to fill the width of its parent container
  • For WordPress: use a Custom HTML block in the page editor
  • For Squarespace: use a Code Block in the page editor
  • For Wix: use the HTML Embed widget
  • For a static site: paste directly into your HTML file
3

Understand How the Embed Works

  • The embed script creates a responsive iframe containing your booking form
  • The iframe automatically resizes to match the form content — no scrollbars inside the frame
  • Your website styles do NOT affect the booking form (iframe isolation)
  • The form inherits your PestBooker branding and customization settings
4

Configure the Container (Optional)

  • Set a max-width on the parent container to control form width (recommended: 600–800px)
  • Center the container with margin: 0 auto for a clean layout
  • On mobile devices, the iframe will fill the full screen width automatically
5

Advanced Snippet Options (Optional)

  • Enterprise: add a data-office attribute to route the embed to a specific office's branding and service area - see "Enterprise & Multi-Office Setup"
  • Add a data-theme attribute to force a specific booker design (Classic or Checkout) for this embed, overriding your account default
6

Verify the Embed

  • Load your page in a browser and confirm the booking form appears
  • Test on mobile to ensure the form is responsive
  • Complete a test booking to verify the full flow works
  • Open DevTools (F12) → Console to check for any errors
7

Set Up Conversion Tracking (Optional)

  • The embed script automatically forwards booking events to your page for analytics
  • If you have Google Tag Manager on the same page, events will appear in your dataLayer
  • See the Google Tag Manager & Analytics docs page for full conversion tracking setup

Pro Tips

  • • UTM parameters and ad click IDs (gclid, fbclid, msclkid) are captured automatically from your page URL and saved with each lead
  • • The booking form does NOT load its own GTM inside the iframe — your page GTM handles all tracking
  • • If the form does not appear, check that your booking page URL is correct in Dashboard → Settings → Booker
  • • Avoid placing the embed inside a container with overflow: hidden, as this can clip the form during resize transitions
  • • The embed script is lightweight and loads asynchronously — it will not slow down your page
  • • For conversion tracking details, see the Google Tag Manager & Analytics documentation

Need help with setup?

Email us and we'll walk you through any integration or setup process.

Contact Sales