FieldCamp

Adding the Booking Widget to Your Website | FieldCamp

Embed FieldCamp's online booking widget on your website to let customers book services 24/7. Step-by-step install guide for WordPress, Wix, Squarespace, and Shopify.

The booking widget lets your customers schedule services directly from your website without leaving the page. Once installed, a small chat-style widget appears in the bottom corner, giving visitors instant access to your online booking flow.

Before installing the widget, make sure you have set up online booking and configured at least one service area so customers can actually complete a booking.

Getting Your Widget Code

Step 1: Access Your Unique Code

  1. Log in to FieldCamp
  2. Navigate to Settings → Online Booking
  3. Find the "Chat Widget Integration" section
  4. You'll see two code blocks ready to copy

The widget code is unique to your account and includes your personal token. Never share this code publicly or commit it to a public repository.

Installation Instructions

Step 2: Add CSS to Your Website

  1. In the Online Booking settings, find the first code block labeled "Add CSS to the <head> section"
  2. Click Copy button
  3. Paste this code into the <head> section of your website's HTML

Step 3: Add Widget Scripts

  1. Find the second code block labeled "Add Scripts Before </body>"
  2. Click Copy button
  3. Paste this code just before the closing </body> tag in your HTML

Copy the entire code block exactly as shown — it contains your unique configuration and token.

Installation by Platform

WordPress

  1. Go to Appearance → Theme Editor
  2. Select header.php and add CSS before </head>
  3. Select footer.php and add scripts before </body>
  4. Save changes

Wix

  1. Go to Settings → Custom Code
  2. Add CSS code to "Head" section
  3. Add script code to "Body - End" section
  4. Apply to all pages

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Paste CSS in Header field
  3. Paste scripts in Footer field
  4. Save

Shopify

  1. Go to Online Store → Themes → Actions → Edit Code
  2. Open theme.liquid
  3. Add CSS before </head>
  4. Add scripts before </body>
  5. Save

Customizing Your Widget Appearance

After embedding the widget, you can control how it looks and what text it displays. Visit Appearance & Branding to upload your logo, set brand colors, and adjust the widget style. You can also update the welcome message and button labels through Content & Text Customization.

Testing Your Installation

  1. Save all changes to your website
  2. Clear your browser cache
  3. Visit your website in a new window
  4. Look for the widget in the bottom corner
  5. Click to test the full booking flow — make sure customers can select a service and choose a time slot

If the widget does not appear, double-check that both code blocks are placed in the correct locations and that no ad-blockers or script-blockers are interfering.

Recurring Booking for Online Booking | FieldCamp

Let customers book recurring services like weekly, bi-weekly, or monthly appointments through your FieldCamp online booking widget with automated scheduling.

Service Areas for Online Booking | FieldCamp

Define service areas in FieldCamp using radius, polygon, or zip code zones to control where customers can book online. Optimize dispatching and team coverage.

On this page

Getting Your Widget CodeStep 1: Access Your Unique CodeInstallation InstructionsStep 2: Add CSS to Your WebsiteStep 3: Add Widget ScriptsInstallation by PlatformWordPressWixSquarespaceShopifyCustomizing Your Widget AppearanceTesting Your InstallationRelated Articles