How can I properly load a script in Webflow after the page has been fully loaded, specifically for a popup created with Calendly?

To load a Calendly popup script only after the page is fully loaded in Webflow, you need to delay script execution until the DOM and all resources are ready. This ensures smooth rendering and avoids blocking page load.

1. Use Webflow’s Page Footer Custom Code Area

• Go to Project Settings > Custom Code.
• In the Footer Code section, paste your inline script that loads Calendly.
• Wrap the Calendly script initialization inside a window.onload function to defer execution.

2. Wrap the Script Inside window.onload

• Use a wrapper like this:
• Format Reference Only: You should wrap your Calendly code in window.onload = function() { /* Calendly code here */ };
• This ensures the script waits until the entire page and all dependencies are fully loaded.

3. Include Calendly’s External Script Dynamically

• You can inject Calendly’s JavaScript only when needed using JavaScript to avoid pre-loading.
• Use let s = document.createElement("script") inside the window.onload to inject https://assets.calendly.com/assets/external/widget.js.

4. Example of JS Behavior (Do Not Paste Raw Code)

Inside the window.onload block:

• Dynamically create a script tag for Calendly.
• Wait until the page is ready before setting up event listeners or initializing the Calendly popup.
• Attach your event trigger (e.g., a button click) that opens the Calendly popup using its API like Calendly.initPopupWidget().

5. Add Button with Data Attributes in Webflow

• On the page, add a Button element with a unique custom ID (e.g., open-calendly).
• Use this ID in your script to attach a click event that triggers the popup.

Example sequence:

• Page fully loads
• Calendly script loads
• Button becomes active
• Click triggers Calendly popup

Summary

To properly load a Calendly popup script in Webflow after the page has fully loaded:

• Wrap your Calendly initialization code inside window.onload
• Use Webflow’s Footer Custom Code section to add this
• Dynamically load Calendly’s script to avoid blocking page load
• Trigger the popup using a custom button and Calendly’s API

This method ensures smooth performance and defers external scripts until the page is completely loaded.