Quick Start - iFrame

Complete iframe installation guide for the Practice Growth Suite.

Prerequisites

Before installing the Practice Growth Suite iframe, ensure you have:

• Company ID: Your company identifier
• Location ID: Specific office location (for single office mode)
• Web Server: A web server to host your website
• HTTPS: Secure connection (recommended for production)

Iframe Installation

Method 1: JavaScript Widget (Recommended)

The JavaScript widget is the most common installation method, providing a popup scheduler that integrates seamlessly with your website.

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

Choose your initialization mode and add the configuration:

Single Office Mode:

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

Multi Office Mode:

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

Same Day App Mode:

<script>
var jarvis = new JarvisAnalyticsScheduler({
  token: "your_token_here",
  companyId: "your_company_id",
  sameday: true
});
</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>

Method 2: Iframe Embedding

For direct integration into your page layout, use iframe embedding.

Step 1: Create Container

Add a container div where you want the scheduler to appear:

<div id="container" style="width: 100%; height: 600px;"></div>

Step 2: Initialize Iframe

Add the iframe initialization script:

Getting Your Configuration Values: Before using the code examples below, you'll need to obtain your specific {company_identifier} and {location_id} values from your configuration page at schedule.jarvisanalytics.com.

Single Office Iframe:

(function () {
  var referrer = document.referrer;
  iframe = document.createElement("iframe");
  iframe.setAttribute("src", "https://schedule.jarvisanalytics.com/frame/{company_identifier}?location_id={location_id}&referrer=" + referrer);
  iframe.setAttribute("class", "my-custom-class");
  iframe.style.width = 100 + "%";
  iframe.style.height = 100 + "%";
  iframe.style.border = "none";
  document.getElementById("container").appendChild(iframe);
})();

Multi Office Iframe:

(function () {
  var referrer = document.referrer;
  iframe = document.createElement("iframe");
  iframe.setAttribute("src", "https://schedule.jarvisanalytics.com/frame/{company_identifier}?referrer=" + referrer);
  iframe.setAttribute("class", "my-custom-class");
  iframe.style.width = 100 + "%";
  iframe.style.height = 100 + "%";
  iframe.style.border = "none";
  document.getElementById("container").appendChild(iframe);
})();

Same Day Iframe with Geolocation:

(function () {
  var referrer = document.referrer;
  iframe = document.createElement("iframe");
  iframe.setAttribute("src", "https://schedule.jarvisanalytics.com/sameday/{company_identifier}?referrer=" + referrer);
  iframe.setAttribute("class", "my-custom-class");
  iframe.setAttribute("allow", "geolocation *");
  iframe.style.width = 100 + "%";
  iframe.style.height = 100 + "%";
  iframe.style.border = "none";
  document.getElementById("container").appendChild(iframe);
})();

Platform-Specific Iframe Installation

WordPress

1. Add to Theme Header: Add the iframe container to your theme's template files
2. Create Custom Page: Add the iframe initialization code to a custom page template
3. Use Shortcode: Create a shortcode for easy iframe integration

Shopify

1. Edit Theme: Go to Online Store > Themes > Edit code
2. Add to Layout: Include the iframe container and script in your theme files
3. Create Section: Add the iframe scheduler to a custom section

Wix

1. Custom Code: Use the HTML embed element for the iframe container
2. Add Script: Include the JavaScript iframe initialization in the custom code
3. Style Integration: Customize the iframe appearance to match your site

Squarespace

1. Code Injection: Add the iframe script to Settings > Advanced > Code Injection
2. Page Embed: Use the Code block to add the iframe scheduler
3. Custom CSS: Style the iframe to match your design

Security Considerations

HTTPS Requirements

• Production: Always use HTTPS for production websites
• Development: HTTP is acceptable for local development
• Mixed Content: Ensure all resources load over the same protocol

Token Security

• Environment Variables: Store tokens in environment variables
• Server-Side Rendering: Generate tokens server-side when possible
• Token Rotation: Regularly rotate authentication tokens

CORS Configuration

• Allowed Origins: Configure CORS to allow your domain
• Referrer Policy: Set appropriate referrer policies
• Content Security Policy: Configure CSP headers if needed

Testing Your Iframe Installation

Basic Functionality Test

1. Load the Page: Ensure the iframe loads without errors
2. Check Console: Look for any JavaScript errors
3. Verify Display: Confirm the iframe scheduler appears correctly
4. Test Functionality: Interact with the scheduler within the iframe

Advanced Testing

1. Cross-Browser Testing: Test in Chrome, Firefox, Safari, and Edge
2. Mobile Testing: Verify iframe functionality on mobile devices
3. Performance Testing: Check load times and performance impact
4. Accessibility Testing: Ensure iframe compliance with accessibility standards

Troubleshooting Iframe Installation

Common Issues

Iframe Not Loading:

• Check the iframe URL is correct
• Verify network connectivity
• Check browser console for errors

Scheduler Not Appearing:

• Verify token and company ID are correct in the iframe URL
• Check for JavaScript errors in console
• Ensure the container div is properly configured

Styling Issues:

• Check CSS conflicts with your theme
• Verify iframe dimensions are set correctly
• Test with different screen sizes

Getting Help

If you encounter issues during iframe installation:

1. Check Documentation: Review the iframe configuration options
2. Console Errors: Look for JavaScript errors in browser console
3. Network Tab: Check if the iframe resources are loading correctly
4. Contact Support: Reach out to Jarvis Analytics support team

Next Steps

After successful iframe installation:

1. Configure Options: Customize the iframe scheduler appearance and behavior
2. Add Event Handlers: Implement analytics and tracking for iframe events
3. Test Functionality: Verify all iframe features work as expected
4. Go Live: Deploy iframe to production environment