How can I properly load a script in Webflow after the page has been fully loaded, specifically for a popup created with Calendly?
TL;DR
- Add Calendly’s script in Webflow’s Footer Custom Code and wrap it in a window.addEventListener('load') to delay execution until the full page loads.
- Include the Calendly embed library before your script, and use a button with class calendly-btn to trigger the popup via a click listener.
To properly load a Calendly popup script after the page has fully loaded in Webflow, you need to defer the script execution until everything, including assets, has finished loading.
1. Add the Calendly Script to Custom Code
- Go to Project Settings > Custom Code.
- In the Footer code section, paste the Calendly embed script so it loads after the DOM is built.
- Modify the script to include a window
loadevent listener, ensuring it doesn’t execute until the full page—including images—is loaded.
Example:
- Wrap the Calendly setup in a
window.addEventListener('load', function() { ... });block. - This ensures it runs only after the
window.onloadevent.
2. Use an Embed Element for Page-Specific Loading
- If the popup is needed on a specific page only, use a Webflow HTML Embed block and insert the script there.
- In the
<body>Embed, include the samewindow.addEventListener('load', …)usage.
3. Sample Modified Script
Use this inside the <body> Embed or Footer Custom Code:
window.addEventListener('load', function() { var calendlyLink = document.querySelector('.calendly-btn'); if (calendlyLink) { calendlyLink.addEventListener('click', function(e) { e.preventDefault(); Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_URL' }); }); }});- Replace
'https://calendly.com/YOUR_URL'with your actual Calendly link. - Ensure the trigger button has the class
calendly-btn, or adjust the selector accordingly.
4. Include Calendly's Embed Library
- Still in the Footer code, before your custom script, include this line:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>- The
asynchelps the script load asynchronously without blocking the rest of the page.
Summary
To defer loading a Calendly popup script in Webflow until the page is fully loaded, use window.addEventListener('load', …) to wrap your script and only bind the popup logic afterward. Add the Calendly library script in the Footer and trigger the popup via a button with a click listener.