Follow these simple steps to add the DC Bookings Scheduler Widget to your WordPress site using Elementor.

✅ What You’ll Need:

• A WordPress website with Elementor installed.

• Access to the Elementor > Custom Code section.

• Your DC Bookings domain and shop ID

🛠 Step-by-Step Instructions

1. Open the Elementor Custom Code Panel

• In your WordPress admin panel, go to the left sidebar.

• Navigate to: Elementor → Custom Code
  
  

2. Create a New Custom Code Snippet

• Click the "New Code" button
  
  

• Name your custom code snippet something like: DC Bookings.

3. Paste the Following Code

In the code editor, paste the following snippet:

<iframe class="dc-bookings" id="dc-bookings" src="https://bookings.d14e.io?domain=YOUR_DOMAIN&shopId=YOUR_SHOP_ID" data-overflow="" style="border: 0px; position: fixed; z-index: 2147483647; width: 100vw; height: 100%; inset: 0px; transition: opacity 0.38s ease 0s; opacity: 0; visibility: hidden;"></iframe>

<script src="https://bookings.d14e.io/dcPortal.js"></script>
<script type="text/javascript">
  var dcButtons = document.querySelectorAll('.DC-Bookings-Button');
  dcButtons.forEach(function(dcButton) {
    dcButton.addEventListener('click', function(){
      DCBookings.show();
    });
  });
</script>

✅ Don’t forget to replace:

• YOUR_DOMAIN with your domain

• YOUR_SHOP_ID with your shop ID

4. Set Code Location & Priority

• Under Location, select: </body> - End

• Set Priority to: 1

• Then click Publish
  
  

5. Add the CSS class to your Buttons

To make buttons (or any element) launch the widget:

• Open the page with Elementor.

• Select any element (button, image, text, etc.)

• Under the Advanced tab → CSS Classes, add:

This will link that element to the scheduler pop-up.

🎉 Done!

Your DC Bookings scheduler is now embedded on your site and ready to go! Any element with the DC-Bookings-Button class will now open your widget.