Skip to main content

I have placed multiple buttons linking to the Calendly Pop-up window script on one Wordpress Elementor built webpage. The first fires the pop-up, but the rest won’t. Is it possible that the browser blocks this because it is already pre-loading the script with the first button? What am I missing here? 

I re-used the button styling and settings etc.
The settings per button are exactly the same.

In the test environment I did not install caching plugins etc. and they still act the same as on the live page.

I hope someone has the same experience and knows how to solve this.

Looking forward to answers.

Test: https://cm.miax.nl/diensten

Live: https://cynthiameevis.nl/diensten

If you're encountering issues where only one button triggers the pop-up window while others don't, it could be due to various reasons. Here are some potential causes and solutions:

1. Duplicate IDs: Ensure that each button has a unique ID attribute. Having multiple elements with the same ID can cause JavaScript functions to target only the first element with that ID.

2. JavaScript Function Scope: Check if your JavaScript function for displaying the pop-up is accessible from all buttons. If the function is defined within a limited scope, other buttons might not be able to invoke it. Consider defining the function in the global scope or ensuring it's accessible to all buttons.

3. Button Attributes: Verify that each button has the correct attributes and event handlers assigned. Sometimes, incorrect or missing attributes (such as `onclick`) can prevent buttons from triggering the desired action.

4. Browser Compatibility: Test your page on different browsers to ensure cross-browser compatibility. Sometimes, certain JavaScript features or behaviors might not work consistently across all browsers.

5. Error Handling: Check your browser's developer console for any JavaScript errors. Errors in your code can prevent certain functionalities from working as expected. Fix any reported errors to ensure smooth operation.

6. Event Propagation: Ensure that event propagation is not interfering with button clicks. Use event.preventDefault() or event.stopPropagation() if necessary to prevent unwanted behavior.

7. Testing Environment: If you're testing in a development environment, ensure that any changes made to your code are properly saved and deployed.

By addressing these potential issues, you should be able to troubleshoot why only one button is triggering the pop-up window and ensure that all buttons function as intended.

Hi there,

 

When using Elementor to embed Calendly, the embed code should be added to a Shortcode widget.

You can see this video link for a step-by-step guide to adding the Calendly embed code with Elementor.

elementor.png

 

You can copy the embed code from your Calendly account and paste the full code into this Shortcode widget.

 

I hope this resolves your issue!

I added the following code, trying your first option, but it is still not functioning. @waqas41084 

script < I did this here on purpose, else this response of mine would break this thread.
  document.addEventListener('DOMContentLoaded', function() {
    let btn = document.querySelectorAll('#calendar-calendly,#calendar-calendly2,#calendar-calendly3,#calendar-calendly4,#calendar-calendly5');
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      Calendly.initPopupWidget({url: 'https://calendly.com/cynthiameevis/kennismakingsgesprek?hide_gdpr_banner=1&primary_color=195442'});
    });
  });
script  < I did this here on purpose, else this response of mine would break this thread.

 

The page I refer to: https://cynthiameevis.nl/diensten

I also placed the ID’s in the footer (Let’s talk button) and header Pop-up menu (top right, Maak afspraak button).

Reply


Terms & ConditionsCookie Settings