Adding the Booking Widget to Your Website | FieldCamp

The online booking widget lets your customers schedule services directly from your website without leaving the page. FieldCamp generates a unique embed snippet for your account that you can drop into any CMS or hand-coded site. You can pick from four deploy modes, preview each one in a sandbox, and customize the experience before a single visitor sees it.

Where the Widget Code Lives

Open FieldCamp and go to Settings → Online Booking → Setup. The Setup tab contains three things you will use to install the widget:

1. Booking Page URL — a direct link to your standalone booking page at /booking/<token>. You can paste this into emails, link it from a button, or hand it to a teammate for testing.
2. Deploy Options — four embed cards (Inline Embed, Full Page, Floating Button, Inline Button). Each card swaps the snippet in the Embed Code block underneath.
3. Embed Code — the generated <script> tag(s) for the embed mode you selected, complete with your unique data-token.

The Four Deploy Modes

FieldCamp generates a different snippet depending on the deploy mode you pick. All four load the same booking-widget.js script, but with different data-mode attributes.

Inline Embed

Use this when you have a dedicated booking page (for example /book or /schedule). The snippet renders a target <div> plus a script that hydrates it with your booking widget.

<div id="fieldcamp-booking"></div>
<script async src="https://app.fieldcamp.ai/booking-widget.js"
  data-token="YOUR_TOKEN"
  data-mode="inline"
  data-target="fieldcamp-booking"></script>

The iframe auto-resizes its height as the customer moves through the steps, so the booking flow never gets cut off and there is no inner scrollbar fighting the page scrollbar.

Full Page

Full Page is the simplest snippet — just a single async script tag with data-mode="fullpage". When triggered, the booking experience fills the viewport. This is ideal for a campaign landing page or a "Book Now" QR-code destination.

Floating Button

The Floating Button snippet renders a chat-style button fixed to the corner of every page it is embedded on. The Setup tab exposes three additional controls:

• Position — bottom-right or bottom-left
• Button Color — any hex value (defaults to your brand color)
• Button Text — the label shown on the button (defaults to "Book Now")

Those values are written into the embed code as data-position, data-color, and data-text attributes, so they travel with the snippet — you do not need a second script tag to style it.

Inline Button

If you want to place a "Book Now" call to action in the middle of an existing page (next to a product photo, inside a blog post, etc.), use Inline Button. The snippet ships a small command-queue stub so FieldCampBooking.open() is safe to call even before the main script finishes loading, which means the click handler works on first paint.

How the /booking/<token> URL Works

Every FieldCamp account gets a unique booking token when online booking is enabled. Your public booking page lives at https://app.fieldcamp.ai/booking/<token>. The same token is what the embed script uses to load the right configuration, services, and service areas.

A few query parameters change what the page renders:

• ?mode=inline — strips chrome so the page can be embedded as an iframe inside your site.
• ?mode=fullpage — full-viewport layout used by the Full Page deploy mode.
• ?mode=widget — popup-friendly layout used inside the Floating Button and Inline Button popups.
• ?mode=preview — read-only preview; bookings cannot actually be submitted.
• ?preview=startPage — jumps to a specific step for admin previews.

Validate With the Embed Preview Page

Before you paste the snippet into your live site, use the built-in preview at /booking/embed-preview. The Online Booking settings page renders this preview in a split pane next to your settings so you can see exactly what visitors will experience for each deploy mode.

Installation by Platform

Once you are happy with the preview, copy the embed code and paste it into your website. The script tag is async, so it will not block your page from rendering.

WordPress

1. Go to Appearance → Theme File Editor (or use a code-injection plugin like Insert Headers and Footers).
2. Paste the script tag near the closing </body> tag of your theme.
3. Save the file and clear any caching plugins (WP Rocket, W3 Total Cache, etc.).

Wix

1. Go to Settings → Custom Code.
2. Add a new snippet, paste the embed code, and set placement to Body — end.
3. Apply to all pages (or just the page hosting an inline embed).

Squarespace

1. Go to Settings → Advanced → Code Injection.
2. Paste the embed code into the Footer field.
3. Save. For inline embeds, also add a Code Block on the page where you want the widget to render.

Shopify

1. Go to Online Store → Themes → Edit Code.
2. Open theme.liquid and paste the embed code before </body>.
3. Save.

Hand-coded Sites

Drop the snippet directly before </body> in your HTML, or wire it into your build pipeline like any other third-party tag.

Customizing the Widget Experience

After embedding, you can keep iterating on how the widget looks and behaves without touching your website code:

• Branding — colors, logo, and favicon update from Online Booking settings and reflect everywhere the widget is loaded.
• Booking type — let customers create a service request, book a one-off job, or set up a recurring schedule.
• Scheduling format — choose fixed-time scheduling, arrival windows with manual capacity, or arrival windows with provider-based capacity.
• Online payments — connect Stripe and toggle whether the booking flow asks for payment upfront, requests a deposit, or skips it for quote-mode flows.

Testing Arrival Windows and Quote Mode

Before launching, walk through the live booking page using the Booking Page URL from Setup. This is the same flow your real customers will hit.

Troubleshooting

The widget does not appear on my site

1. Confirm the booking token is present in the snippet — if it still says YOUR_TOKEN, save the Setup tab in FieldCamp first.
2. Open your browser dev tools and look for a 404 on booking-widget.js. If the path is wrong, recopy the snippet from Online Booking → Setup.
3. Check that the script tag is not inside another iframe that blocks third-party scripts (some legacy CMS page builders do this).

Customers say "We do not service your area"

Service-area gating runs on every submission. If customers in valid territories are seeing the out-of-area message:

• Open Service Areas and confirm the postal code, polygon, or territory covers their address.
• Verify the Service Area Method matches what you want — postalCode, streetAddress, or territoryDropdown. The widget gates differently for each.
• Test with the same postal code or address yourself using the public booking URL.

The popup opens but bookings never reach FieldCamp

• Check that the Booking Type allowed in Setup matches what the customer is trying to do (request vs one-off vs recurring).
• For paid services, confirm Stripe is connected and the service has a price set.
• Look at the request / job logs in Tracking Job Logs to see if the booking landed but was filtered out.

The widget looks great in preview but breaks on my live site

• A custom CSS rule on your site may be overriding the widget's styles. Inspect the floating button and remove any global button { ... } rules that fight it.
• Ad blockers and strict tracking-prevention extensions occasionally block third-party iframes. Test in a private window with extensions disabled.

FAQs

Can I run the widget on more than one website? Yes. The same snippet can be embedded on any number of domains. Bookings from all of them feed into the same FieldCamp account.

Can I change the floating button color without re-copying the snippet? You can — but the data-color and data-position attributes in the snippet override what is stored in settings. If you want a single source of truth, leave those attributes off the embed and edit them from Setup instead.

Does the widget support arrival windows? Yes. Once you turn on arrival windows in arrival windows with manual capacity or arrival windows with provider-based capacity, the booking widget automatically shows windows instead of discrete time slots.

Can I open the widget from my own JavaScript? Yes. The Inline Button and Floating Button modes expose a FieldCampBooking.open() method that opens the popup. You can call it from any click handler on your page.

Can I preview without affecting my real schedule? Use the embed preview pane on the Setup tab. It loads the booking flow in preview mode so customers cannot accidentally double-book your team while you are testing.

Related Articles

• Setting Up Online Booking — complete the initial configuration before installing the widget
• Service Areas in FieldCamp — define which postal codes and territories your business covers
• Fixed-Time Scheduling Guide — let customers pick exact start times
• Arrival Windows with Manual Capacity — show arrival windows and control daily capacity yourself
• Arrival Windows with Provider-Based Capacity — show arrival windows scoped to each technician's availability
• Connect Stripe for Online Payments — enable upfront payment in the booking flow
• How to Track and Manage Service Requests — what happens to quote-mode bookings
• How to Use Dispatch Calendar — see bookings land on your schedule
• Customer Portal — give clients self-service access to their bookings