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 the Calendly base script in Webflow’s Before </body> tag area via Page or Site Settings.
- Wrap the Calendly popup trigger inside a window.onload function to delay execution until full page load.
- Optionally, add a button with an ID and use JavaScript to trigger the popup on click for more control.
To properly load a Calendly popup script in Webflow after the page has fully loaded, you'll need to delay its execution until the window.onload event or use DOMContentLoaded depending on script placement.
1. Use the Calendly Inline Embed or Popup Widget
- Calendly provides several embed options. For a popup, you typically use the Popup Widget or Popup Text script.
- You can find the script snippet inside your Calendly account under Share > Add to Website > Popup Widget.
2. Add the Script in Webflow's Page Settings or Site Settings
- Go to Page Settings (for a specific page) or Project Settings > Custom Code (for all pages).
- Place the Calendly embed inside the Before </body> tag custom code area to ensure it doesn’t interrupt initial rendering.
3. Delay Script Execution with window.onload
- Wrap the Calendly script trigger inside a
window.onloadto execute only after the full page (including assets) has loaded.
Example (inside Before </body> tag area):
<script>
window.onload = function() {
Calendly.initPopupWidget({url: 'https://calendly.com/your-link'});
};
</script>
- Replace
'https://calendly.com/your-link'with your actual Calendly scheduling link. - Make sure Calendly’s embed script is also loaded before this trigger, like this:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
4. Optional: Trigger Calendly Popup on a Button Click
- If you prefer the popup to open only on a button click, rather than automatically on load:
- Add a custom button in Webflow and give it a unique ID (e.g.,
calendly-btn). - Use this script:
<script>
window.onload = function() {
document.getElementById("calendly-btn").addEventListener("click", function() {
Calendly.initPopupWidget({ url: 'https://calendly.com/your-link' });
return false;
});
};
</script>
Summary
To load a Calendly popup script only after the page has fully loaded, wrap the Calendly.initPopupWidget() inside a window.onload function. Ensure the Calendly base script (widget.js) is included and loaded asynchronously. Optionally, trigger it on button click for better user control.