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.
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).
