EMRG Logo

Clinics, Start Here!

Learn the basics and get up and running quickly with EMRG

Back to Clinics, Start Here!Next: How to use Campaigns to send Intake Forms to Your Existing Patients

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.

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.

Back to Clinics, Start Here!Next: How to use Campaigns to send Intake Forms to Your Existing Patients
How to Put Your Booking Widget on Your Website - EMRG Support | EMRG Docs