How can I add an onClick event to a Webflow button in order to trigger a Calendly embed popup, following the instructions provided by Calendly? I've tried the method mentioned in a thread but it's not working. Please assist.
- Add Calendly's embed script to your site's footer in Project Settings and publish the site.
- Trigger the popup via a button using either an
onclickattribute or a custom JavaScript event tied to a button ID.
To trigger a Calendly embed popup from a Webflow button using an onClick event, you must ensure the following conditions are met: Calendly’s embed script is added correctly, and your button contains the proper trigger code. If it's not working, it's likely due to a missing script or misconfigured custom attribute.
1. Confirm You’ve Added the Calendly Embed Script Site-Wide
- Go to Project Settings → Custom Code → Footer section.
- Paste the following Calendly script before the closing
</body>tag:
https://assets.calendly.com/assets/external/widget.js
- Example:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
- Publish your site after saving to apply the script.
2. Set Up the Button Using Custom Attributes
- Select your button in the Webflow Designer.
- Go to the Element Settings panel (gear icon) in the right sidebar.
- Under Custom Attributes, add the following:
- Name:
onclick - Value:
Calendly.initPopupWidget({url: 'https://calendly.com/YOUR_USERNAME'});return false;
- Replace
https://calendly.com/YOUR_USERNAMEwith your actual Calendly booking link.
3. Optional: Use Custom Code Instead of the onclick Attribute
If using the onclick attribute doesn’t work (due to Webflow stripping certain attributes), you can use an Embed element or Page Footer Custom Code:
- Give your button a unique ID, e.g.,
open-calendly. - Navigate to Page Settings → Footer Code for that specific page or use an Embed block.
- Add the following inside the
<script>tag (remove angle brackets in Webflow editor):
`document.getElementById('open-calendly').addEventListener('click', function(e) {
e.preventDefault();
Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_USERNAME' });
});`
- As before, replace the URL with your Calendly link.
4. Publish and Test
- Make sure to publish your site, not just preview it.
- Open the live site and click the button to confirm the Calendly popup works.
Summary
To launch a Calendly popup from a Webflow button, ensure the Calendly embed script is included in your footer, then trigger the popup using either the onclick attribute or custom JavaScript linked to your button ID. Always publish the site to see the changes take effect.