Skip to main content

Widget Customizations

JavaScript widget implementation for single office scheduling.

Overview​

The Single Office Widget mode is designed for businesses with a single location. It provides a popup scheduler that allows patients to book appointments at your specific office location.

Initialization​

Step 1: Include the Script​

Add the Practice Growth Suite script to your HTML header:

<script src="https://schedule.jarvisanalytics.com/js/init.min.js"></script>

Step 2: Initialize the Scheduler​

Initialize the scheduler with your single office configuration:

<script>
var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}"
});
</script>

Step 3: Add Trigger Button​

Add a button to your website to trigger the scheduler:

<button type="button" onclick="jarvis.toggle()">Book an Appointment</button>

Configuration Options​

Required Parameters​

  • token (string) - Authentication token from your Jarvis Analytics account
  • locationid (string) - Your specific office location ID
  • companyId (string) - Your company identifier

Optional Parameters​

  • title (string) - Custom title for the scheduler (default: "Book an Appointment")
  • showLogo (number) - Show/hide company logo (1 or 0)
  • showPhoneNumber (boolean) - Show phone number button (true/false)
  • showAddress (boolean) - Show Address block (true/false)
  • modalMode (boolean) - Enable modal overlay with backdrop (true/false)
  • title (string) - Customize Page Title (default:"Book an Appointment")
  • colors (object) - Custom color scheme
  • useDatePicker (boolean) - Show monthly-based date picker for appointment selection (true/false)
  • map (object) - Show a map of the office location (true/false)

Example Configuration​

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  title: "Schedule Your Visit",
  showLogo: 1,
  showPhoneNumber: true,
  modalMode: true,
  colors: {
    bodyBackground: "#F3F4F6",
    headerBackground: "#FFFFFF",
    primaryButtonBackground: "#007bff"
  },
  onOpen: function() { console.log('Scheduler opened'); },
  onClose: function() { console.log('Scheduler closed'); },
  onError: function(error) { console.error('Scheduler error:', error); }
});

Features​

Single Location Focus​

  • Pre-selected Location: Automatically sets the office location
  • Streamlined Experience: Patients don't need to choose a location
  • Faster Booking: Reduces steps in the booking process
  • Backdrop: Semi-transparent overlay behind the scheduler
  • Centered Display: Scheduler appears in the center of the screen
  • Easy Dismissal: Click outside to close the scheduler

Customizable Appearance​

  • Brand Colors: Match your website's color scheme
  • Company Logo: Display your logo in the scheduler
  • Custom Title: Set your own title text

Event Handling​

Basic Events​

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  onOpen: function() {
    console.log('Scheduler opened');
    // Track scheduler open event
  },
  onClose: function() {
    console.log('Scheduler closed');
    // Track scheduler close event
  },
  onError: function(error) {  
    console.error('Scheduler error:', error);
    // Handle errors
  }
});

Advanced Event Tracking​

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  onOpen: function() {
    // Google Analytics tracking
    if (typeof gtag !== 'undefined') {
      gtag('event', 'scheduler_open', {
        'event_category': 'scheduler',
        'event_label': 'single_office'
      });
    }
  },
  onClose: function() {
    // Google Analytics tracking
    if (typeof gtag !== 'undefined') {
      gtag('event', 'scheduler_close', {
        'event_category': 'scheduler',
        'event_label': 'single_office'
      });
    }
  }
});

Styling Examples​

Custom Color Scheme​

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  colors: {
    bodyBackground: "#f8f9fa",
    headerBackground: "#ffffff",
    primaryButtonBackground: "#28a745",
    secondaryButtonBackground: "#6c757d",
    textColor: "#333333",
    linkColor: "#007bff"
  }
});

Professional Theme​

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  colors: {
    bodyBackground: "#ffffff",
    headerBackground: "#f8f9fa",
    primaryButtonBackground: "#007bff",
    secondaryButtonBackground: "#6c757d",
    textColor: "#212529",
    linkColor: "#0056b3"
  }
});

Best Practices​

Performance​

  • Load Script Early: Include the script in the <head> section
  • Minimize Dependencies: Avoid conflicts with other JavaScript libraries
  • Optimize Loading: Use async loading for better performance

User Experience​

  • Clear Call-to-Action: Use descriptive button text
  • Consistent Styling: Match your website's design
  • Mobile Optimization: Ensure the scheduler works on mobile devices

Security​

  • Token Protection: Store tokens securely
  • HTTPS Usage: Use HTTPS in production
  • Input Validation: Validate all user inputs

Troubleshooting​

Common Issues​

Scheduler Not Opening:

  • Verify the token, locationid, and companyId are correct
  • Check browser console for JavaScript errors
  • Ensure the script is loaded before initialization

Styling Issues:

  • Check for CSS conflicts with your website theme
  • Verify color values are in valid hex format
  • Test on different browsers and devices

Performance Problems:

  • Check network connectivity
  • Verify script loading times
  • Monitor for JavaScript errors

Debug Mode​

Enable debug mode for troubleshooting:

var jarvis = new JarvisAnalyticsScheduler({
  token: "{your_token}",
  companyId: "{your_company_id}",
  locationid: "{your_location_id}",
  debug: true // Enable debug logging
});