How to Put Your Booking Widget on Your Website

Complete guide to integrating the EMRG Booking Widget into any website, including special instructions for users transitioning from BLVD.

Quick Setup Option

If you're okay with just having your book buttons open up your EMRG booking page in a new tab, simply use this URL for your buttons:

https://joinemrg.com/book?clinicId=YOUR_CLINIC_ID

Replace YOUR_CLINIC_ID with your actual clinic ID provided by your EMRG Success Specialist.

Otherwise, follow the guide below to add the interactive widget overlay to your website.

Choose Your Integration Method

We offer two integration approaches depending on your needs:

Method 1: Modern Click-Based Integration (Recommended)

Best for new installations or when you want full control over button placement and styling.

Method 2: Hash-Based Integration (BLVD Migration)

Perfect for users transitioning from BLVD, as it works with existing `#book-now` button links.

Method 1: Modern Click-Based Integration

Step 1: Add Widget Script to Your Website

Add this code to your website's HTML <head> section or footer:

<!-- EMRG Widget Integration -->
<script>
  (function (d) {
    var config = {
      clinicId: YOUR_CLINIC_ID, // Replace with your clinic ID
      gaMeasurementId: "G-XXXXXXXXXX", // Optional: Replace with your Google Analytics ID
      metaPixelId: "XXXXXXXXXXXXXXXX", // Optional: Replace with your Meta Pixel ID
    };

    var script = d.createElement("script");
    var firstScript = d.querySelector("script");

    script.src = "https://joinemrg.com/widget.js";
    script.async = true;
    script.defer = true;
    script.onload = function () {
      if (window.emrgWidget) {
        window.emrgWidget.init(config);
      }
    };

    firstScript.parentNode.insertBefore(script, firstScript);
  })(document);
</script>
<!-- End EMRG Widget -->

Step 2: Add Booking Buttons

Create buttons anywhere on your website using this code:

<div onclick="window.launchEmrgWidget && window.launchEmrgWidget(YOUR_CLINIC_ID)" class="btn">
  Book an Appointment
</div>

The widget will open in a modal when the button is clicked.

You can also use regular HTML buttons:

<button onclick="window.launchEmrgWidget && window.launchEmrgWidget(YOUR_CLINIC_ID)" class="booking-btn">
  Schedule Now
</button>

Or integrate with existing JavaScript:

// For custom event handling
function openBookingWidget() {
  if (window.launchEmrgWidget) {
    window.launchEmrgWidget(YOUR_CLINIC_ID);
  }
}

Method 2: Hash-Based Integration (BLVD Migration)

Perfect for BLVD users: If you're switching from BLVD, your existing buttons already use #book-now links, so this method will make them work with EMRG automatically.

Step 1: Add Widget Script with Hash Handling

Add this code to your website's HTML <head> section or footer:

<!-- EMRG Widget Integration with Hash Support -->
<script id="widget-injector" src="https://joinemrg.com/widget.js" async defer></script>
<script>
// Initialize widget after page loads
window.addEventListener('load', function() {
  if (window.emrgWidget) {
    window.emrgWidget.init({
      clinicId: YOUR_CLINIC_ID,
      gaMeasurementId: 'G-XXXXXXXXXX' // Optional: Your Google Analytics ID
    });
  }
  
  // Check if page loaded with #book-now hash
  if (window.location.hash === '#book-now') {
    // Small delay to ensure widget is ready
    setTimeout(function() {
      if (window.launchEmrgWidget) {
        window.launchEmrgWidget(YOUR_CLINIC_ID);
      }
    }, 250);
  }
});

// Listen for hash changes (when someone clicks a #book-now link)
window.addEventListener('hashchange', function() {
  if (window.location.hash === '#book-now') {
    if (window.launchEmrgWidget) {
      window.launchEmrgWidget(YOUR_CLINIC_ID);
    }
    // Clean up URL after opening widget
    history.replaceState(null, null, window.location.pathname);
  }
});
</script>
<!-- End EMRG Widget -->

Step 2: Use #book-now Links

Your existing buttons should already work if they use #book-now links:

<a href="#book-now" class="btn">Book Appointment</a>
<button onclick="window.location.hash='book-now'">Schedule Now</button>

WordPress Integration

Using a Plugin (Recommended)

Install a Header/Footer Plugin

Go to Plugins → Add New
Search for "Insert Headers and Footers" or "WP Headers and Footers"
Install and activate

Add the Widget Code

Go to Settings → Insert Headers and Footers (or similar)
Paste your chosen method's code in the Footer section
Save changes

Manual Integration

Add the widget code to your theme's footer.php file before the closing </body> tag, or in your theme's functions.php using:

function add_emrg_widget() {
    // Paste your chosen widget code here
}
add_action('wp_footer', 'add_emrg_widget');

Configuration Options

Required Settings

clinicId: Your unique EMRG clinic ID (provided by your Success Specialist)

Optional Settings

gaMeasurementId: Your Google Analytics 4 Measurement ID for tracking widget interactions
metaPixelId: Your Meta Pixel ID for Facebook/Instagram tracking
Remove the gaMeasurementId and metaPixelId lines entirely if you don't use these tracking services

Finding Your Clinic ID

Your clinic ID is provided by your EMRG Success Specialist. It's usually a number like 16 or 17. Make sure to replace YOUR_CLINIC_ID in all code examples with your actual ID.

Widget Functionality

Once integrated, the EMRG widget provides:

Seamless booking experience directly on your website
Mobile-responsive design that works on all devices
Patient form completion and intake management
Appointment scheduling with real-time availability
Integration with your EMRG system for automatic data sync

Troubleshooting

Widget Not Appearing

Check the script is loading

Open browser developer tools (F12)
Go to Network tab and refresh page
Look for widget.js in the loaded files

Verify your clinic ID

Ensure you've replaced YOUR_CLINIC_ID with your actual number
Double-check the ID with your Success Specialist

Check for JavaScript errors

Open browser developer tools (F12)
Look for red errors in the Console tab

Buttons Not Working

Confirm button code is correct

Make sure onclick handlers include your clinic ID
For hash method, ensure links use #book-now

Check timing issues

The widget script needs to load before buttons are clicked
Try adding a small delay or using the load event

BLVD Migration Issues

Remove old BLVD code

Delete any remaining BLVD widget scripts
Keep your existing #book-now button links

Test all pages

Check that buttons work consistently across your site
Verify the widget opens with your EMRG branding

Google Analytics Not Tracking

Verify your Measurement ID

Ensure you're using the correct GA4 ID format: G-XXXXXXXXXX
Check that GA4 is properly configured on your site

Test tracking

Use GA4's Real-Time reports to see widget events
Events should appear when the widget opens

Meta Pixel Not Tracking

Verify your Pixel ID

Ensure you're using the correct Meta Pixel ID format: XXXXXXXXXXXXXXXX
Check that Meta Pixel is properly configured on your site

Test tracking

Use Meta Events Manager to see widget events
Events should appear when the widget opens

Support

For additional help with widget integration or troubleshooting:

Email: support@joinemrg.com
Contact your EMRG Success Specialist
Check our knowledge base for additional articles

The EMRG team is here to ensure a smooth integration process for your website.