Webflow sync, pageviews & more.
NEW

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.

TL;DR
  • Add Calendly’s embed script in Webflow’s Footer code section and publish the site.
  • Assign a unique ID to your button, then add a script before the tag using Calendly.initPopupWidget() to trigger the popup on button click.

To trigger a Calendly popup via an onClick event on a Webflow button, follow Calendly's updated embed instructions and ensure it's correctly integrated in Webflow.

1. Add the Calendly Embed Script to Your Webflow Project

  • Go to Project Settings in Webflow.
  • Navigate to the Custom Code tab.
  • In the Footer Code section, paste the Calendly embed script:
  • https://assets.calendly.com/assets/external/widget.js
  • Example:
  • <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
  • Click Save Changes, then Publish the site.

2. Assign a Unique ID or Class to the Button

  • Select your button in the Webflow Designer.
  • Go to the Settings panel (gear icon).
  • Add a unique ID (e.g., calendly-popup-btn), or use a class like calendly-btn.

3. Add the JavaScript Trigger for the Popup

  • In the Webflow Designer, go to the Page Settings of the page where the button is located.
  • Scroll to the Before tag field and add the custom script, replacing the event ID with yours:
  • Example:
    ```html ```
  • Replace 'https://calendly.com/your-username/your-event' with your actual Calendly URL.
  • Click Save, then Publish the site.

4. Common Troubleshooting Tips

  • Ensure the Calendly script loads before calling Calendly.initPopupWidget. Placing the script in the Footer ensures this.
  • Confirm that the button ID matches what you're using in the script.
  • Test in a live published environment, not in Webflow Preview mode.
  • Calendly popups won't work properly if browser settings block pop-ups or third-party scripts.

Summary

To trigger a Calendly popup on button click in Webflow: add Calendly's script in the Footer code, assign a unique ID to your button, and use Calendly.initPopupWidget() in a script placed before the </body> tag. Ensure scripts are correctly loaded and test only on the live site.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why is there a difference in pricing for the CMS site plan on Webflow between my friend's account and my newly created account?
How do I rename text span blocks in the Webflow panel?
What are some third party tools or integrations that can be used with Webflow?
How can I create a thumbnail image slider in Webflow without the lightbox feature?
How can I display one random testimonial each time my Webflow page refreshes without using the Random/Shuffle Order display? I tried using the script from Pixelgeek's Youtube video (), but it didn't work. Can someone please help me?
Can I offer a monthly subscription service using Webflow Ecommerce?
How can I edit specific classes that I have created in Webflow? I am unable to locate the option box mentioned in an old response from 2014, and I do not see it to the right of the classes text field. The only dropdowns I see are for renaming or duplicating a class and selecting pseudo-classes. Here are screenshots for reference: [Include screenshots here]
What could be causing a glitch on all pages with anchors in Webflow?
How can I add this to Webflow? Is there a script or code available?
Is adding meta data to the 404 page in Webflow a safer and better method for no indexing compared to disallowing the 404 page?
Can Webflow support features like personalization and A/B testing found in landing page builders such as Instapage and Unbounce?
How can I remove the underline in paragraph text within a link block on my Webflow site?
How can I make the block in Webflow containing hidden text grow to the same height as the text itself when the button is clicked, without pushing other elements?
How can I fix the issue with the multi-select dropdown not working when selecting multiple options in Webflow after integrating Memberstack?
How can I connect an external API to Webflow to retrieve data and utilize it in my Webflow project? Is it possible to call APIs through buttons in Webflow? I suspect that implementing custom JavaScript in the header or footer scripts may be necessary, but I'm curious if anyone has experience with this. Thank you!
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?