Booking Widget Integration
Complete guide to implementing and customizing the Worxflow booking widget on your website.
Widget Overview
What It Does
The Worxflow booking widget allows customers to schedule appointments directly from your website, providing a seamless booking experience that integrates with your shop's calendar and service catalog.
Key Features
- Real-time Availability - Live calendar sync
- Service Selection - Your service catalog
- Smart Scheduling - Conflict prevention
- Mobile Responsive - Works on all devices
- Custom Branding - Match your website
- Multi-language - Support for various languages
Quick Installation
Basic Installation
To add the booking widget to your website, you'll need to:
- Get your unique Shop ID from your Worxflow dashboard
- Have your web developer add the widget code to your website
- The widget will automatically display your available services and time slots
The installation requires adding a small piece of code to your website that connects to your shop's calendar and service catalog.
WordPress Plugin
Easy Installation Steps:
- Download the Worxflow booking plugin from your dashboard
- Install the plugin through your WordPress admin panel
- Activate the plugin once installed
- Enter your unique Shop ID from your Worxflow account
- Add the booking widget to any page using the provided shortcode
Popular Website Builders
| Platform | Integration Method | Difficulty |
|---|---|---|
| WordPress | Plugin or HTML | Easy |
| Wix | HTML iframe | Easy |
| Squarespace | Code Block | Medium |
| Shopify | Custom HTML | Medium |
| Webflow | Embed element | Easy |
| GoDaddy | HTML section | Easy |
Configuration Options
Basic Configuration Options
Required Settings:
- Your unique Shop ID (provided by Worxflow)
- Website location where widget appears
Customization Options:
- Brand Colors: Match your shop's colors and fonts
- Language: Support for multiple languages
- Timezone: Automatically set to your shop's location
- Pricing Display: Choose whether to show service prices
- Contact Requirements: Decide if phone number is required
Advanced Features
Pre-fill Customer Information: If customers are logged into your website, their information can automatically fill in the booking form.
Service Restrictions: Limit which services appear in the widget (useful for specialty landing pages).
Custom Questions: Add your own questions like:
- "How did you hear about us?"
- "Preferred communication method"
- "Special requests or concerns"
Success Tracking: Automatically track completed bookings in Google Analytics or other marketing tools to measure the widget's effectiveness.
Customization
Visual Customization
The widget can be styled to match your website's look and feel:
- Primary Color: Your shop's main brand color
- Secondary Color: Accent and text colors
- Success Color: Confirmation messages (typically green)
- Error Color: Warning messages (typically red)
- Border Style: Rounded or square corners
- Background: Match your website's background
- Text Colors: Light and dark text options
- Shadows: Subtle depth effects
Size Options
Automatic Sizing: The widget automatically adjusts to fit your website's layout.
Fixed Dimensions: Set specific width and height if needed for your design.
Responsive Design: Widget automatically adapts to mobile phones, tablets, and desktop screens for the best user experience.
Display Modes
| Mode | Description | Use Case |
|---|---|---|
| Embedded | Inline on page | Main booking page |
| Modal | Popup overlay | Call-to-action button |
| Floating | Fixed button | All pages |
| Fullscreen | Entire viewport | Mobile experience |
Mobile Optimization
Mobile Experience
Mobile Optimizations:
- Full Screen Mode: Takes up entire phone screen for easy use
- Simplified Navigation: Streamlined steps for small screens
- Large Buttons: Easy to tap with fingers
- Touch-Friendly: Swipe between steps and touch calendar
Touch Optimizations
- Swipe Navigation - Between steps
- Touch Calendar - Easy date selection
- Large Tap Targets - 44px minimum
- Auto-Zoom Prevention - Font size 16px+
Booking Flow
Customer Journey
The booking widget guides customers through a simple 5-step process:
Step 1: Service Selection
- Browse your service categories
- Select the service(s) they need
- See service duration and pricing
Step 2: Date & Time Selection
- View available appointment slots on an interactive calendar
- Select their preferred date and time
- Confirm their scheduling choice
Step 3: Vehicle Information
- Enter vehicle details (Year, Make, Model)
- Optionally provide VIN for more accurate service
- Add any specific concerns or notes about their vehicle
Step 4: Contact Details
- Provide their name and contact information
- Choose preferred communication method (call, text, email)
- Set communication preferences
Step 5: Confirmation
- Review all appointment details for accuracy
- Submit their booking request
- Receive immediate confirmation with appointment details
Data Collection
| Step | Required Fields | Optional Fields |
|---|---|---|
| Service | Service type | Additional services |
| Schedule | Date, Time | Preferred tech |
| Vehicle | Year, Make, Model | VIN, License, Color |
| Customer | Name, Phone/Email | Address, Notes |
API Integration
Integration with Your Systems
Automatic Notifications: When customers book appointments, your systems can be automatically notified:
- New Booking: Immediately know when someone books
- Booking Changes: Get updates if customers reschedule
- Cancellations: Receive notifications of cancelled appointments
Information Included:
- Booking reference number
- Customer contact information
- Service requested
- Appointment date and time
- Estimated duration and cost
This allows integration with your existing customer management or marketing systems.
Advanced Integration Features
Widget Control: Your website can programmatically control the widget:
- Open or close the booking window
- Reset the form to start over
- Pre-select specific services
- Pre-set appointment dates
Custom Actions:
- Redirect to custom thank you pages
- Track booking progress through each step
- Integrate with your CRM or email marketing
- Show custom messages based on selected services
These features allow deep integration with your website's user experience.
Analytics & Tracking
Built-in Analytics
Key Dashboard Metrics:
- Widget Views: How many visitors see your booking widget
- Booking Starts: How many customers begin the booking process
- Completion Rate: Percentage of started bookings that finish
- Abandonment Points: Where customers typically stop in the process
- Average Time to Book: How long it takes customers to complete booking
- Popular Services: Which services are booked most frequently
Marketing Analytics
Google Analytics Tracking: Automatically track important booking events:
- How many people view the widget
- Which step most people abandon
- Completed bookings and their value
- Conversion rates from visitors to customers
Key Metrics You'll See:
- Widget load rate
- Step completion percentages
- Booking completion rate
- Average booking value
- Time spent in booking process
Facebook Advertising Integration
Conversion Tracking: Track booking widget performance for Facebook ads:
- View Content: When customers view your services
- Initiate Checkout: When booking process starts
- Purchase: When appointment is successfully booked
This helps optimize your Facebook advertising campaigns by showing which ads lead to actual bookings.
Security & Privacy
Data Protection
- SSL Encryption - All data transmitted securely
- PCI Compliance - No payment data collected
- GDPR Ready - Privacy controls included
- CCPA Compliant - California privacy laws
Spam Prevention
Security Features:
- Google reCAPTCHA: Prevents automated spam bookings
- Hidden Spam Traps: Catches bot submissions
- Rate Limiting: Prevents excessive bookings from same source
- Email Verification: Confirms customer email addresses
These features ensure you only receive legitimate appointment requests and protect your calendar from fake bookings.
Multi-Location Support
Multiple Shop Locations
Location Features: If you have multiple shop locations, customers can:
- Choose their preferred location
- See different services available at each location
- View location-specific availability
- Get directions to selected location
Smart Location Detection: The widget can automatically suggest the closest location based on the customer's location (with their permission).
Example Locations:
- Downtown Shop (default)
- Airport Location
- Westside Branch
Performance Optimization
Website Performance
Fast Loading Options:
- Lazy Loading: Widget loads after main page content
- Deferred Loading: Widget loads when page is ready
- On-Demand Loading: Widget loads only when customer clicks
Benefits:
- Faster initial page load times
- Better search engine optimization
- Improved user experience
- Reduced bandwidth usage
CDN & Caching
- Global CDN - Fast loading worldwide
- Browser Caching - Reduced repeat loads
- Minified Code - Smaller file size
- Gzip Compression - Faster transfer
Troubleshooting
Common Issues
| Problem | Cause | Solution |
|---|---|---|
| Widget not showing | Wrong shop ID | Verify in dashboard |
| No available times | Calendar not set | Configure business hours |
| Styling conflicts | CSS interference | Use iframe mode |
| Mobile issues | Viewport not set | Add meta viewport tag |
| Slow loading | Large page | Lazy load widget |
Testing and Troubleshooting
Debug Features:
- Debug Mode: Provides detailed information for troubleshooting
- Test Mode: Use a sandbox environment for testing without creating real appointments
- Console Logging: Technical details for your web developer
Benefits:
- Test the widget before going live
- Troubleshoot any issues quickly
- Ensure everything works perfectly with your website
Best Practices
Placement Tips
Above the fold on service pages Prominent CTA buttons throughout site Mobile sticky button for easy access Exit intent popup for abandoners Thank you page after other conversions
Conversion Optimization
- Minimize Steps - Use smart defaults
- Show Progress - Step indicators
- Display Trust - Reviews and logos
- Offer Incentives - First-time discounts
- Reduce Friction - Optional fields
Turn your website visitors into booked appointments with the powerful Worxflow booking widget.