Skip to main content

Adding the Booking Widget to Your Website

Install FieldCamp's online booking widget on your website to capture leads and allow customers to book services 24/7.

Updated over 3 weeks ago

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

Important: The code is unique to your account and includes your personal token. Never share this code publicly.

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

Note: 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

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 functionality

Did this answer your question?