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 the Calendly widget script to Webflow's Footer in Project Settings and publish the site.
- Embed a script on the page using
Calendly.initPopupWidget()with your event URL. - Assign an ID to your button and use a Footer script to attach an onClick event calling the Calendly popup.
- Publish the site and test on the live version, not in Webflow preview.
To trigger a Calendly popup widget using an onClick event on a Webflow button, follow this process using Calendly's official method. If it's not working, it's likely due to incorrect script placement or element targeting.
1. Install the Calendly Script in Webflow
Go to Project Settings > Custom Code > Footer.
Paste the official Calendly embed script (from https://help.calendly.com) before the
</body>tag:Calendly’s script:
https://assets.calendly.com/assets/external/widget.jsExample:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>Click Save and Publish your site (scripts work only on published sites).
2. Add Custom Embed Code to Webflow Page
On the page where the button lives, drag a “Embed” element from the Add panel.
Add the following inline script to open the Calendly popup:
```javascript
```
Replace the URL in
'https://calendly.com/your-username/your-event-name'with your actual Calendly event link.
3. Assign onClick Event to the Button
Select your Webflow button.
In the Element Settings panel, give it a unique ID or custom attribute.
Go to the Page Settings > Footer Code and add:
```javascript
```
Again, replace:
#your-button-idwith your button’s actual ID (set from Element Settings).The Calendly URL accordingly.
4. Publish and Test
- Re-publish your site after adding code.
- Make sure you're testing on a live site, not just the Webflow preview.
- The popup will only work with the Calendly script properly loaded.
Summary
To trigger a Calendly popup in Webflow: include Calendly's script in the Footer, add a custom script calling Calendly.initPopupWidget(), and attach an onClick event to your button via script or inline HTML. Confirm it's all added correctly and test on a published site.