Webflow sync, pageviews & more.
NEW
Answers

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.

To add an onClick event to a Webflow button and trigger a Calendly embed popup, you can follow these steps:

1. Start by embedding the Calendly popup script provided by Calendly. You can do this by adding the script to the custom code section of your Webflow project. Go to your Webflow project settings, navigate to the Custom Code tab, and paste the Calendly popup script in the Head Code section.

2. Next, create a button in Webflow or locate the existing button you want to use for triggering the Calendly popup. Give the button a unique class name so that you can target it in your custom code.

3. Now, you can use a combination of Webflow's built-in features and some custom code to add the onClick event to the button.

a. In the Webflow Designer, select the button and open the Interactions panel. Add a new interaction to the button and choose the Trigger option as "Mouse Click".

b. For the action, choose "Run JavaScript". This allows you to add custom JavaScript code to be executed when the button is clicked.

c. In the JavaScript code section, you can define the function that will trigger the Calendly popup. For example, you can use the Calendly.showPopupWidget() function provided by Calendly.

d. You'll need to target the button using its unique class name or ID and add an event listener to it. Inside the event listener, you can call the Calendly.showPopupWidget() function to display the popup.

Here's an example of how the JavaScript code might look like:

```javascript
const button = document.querySelector('.my-button-class'); // Replace with your button's unique class name or ID

button.addEventListener('click', () => {
Calendly.showPopupWidget('https://calendly.com/your-calendly-link');
});
```

Make sure to replace '.my-button-class' with the actual class name or ID of your button and 'https://calendly.com/your-calendly-link' with the URL of your specific Calendly link.

4. Once you have added the JavaScript code to the button's onClick event, publish your Webflow project, and test the button. When you click the button, it should trigger the Calendly popup as per your requirements.

Remember to check the console for any errors that might be preventing the code from working correctly. Additionally, if you're directly copying code from a thread, ensure that it is compatible with Webflow and the current version of Calendly you are using.

Rate this answer

Other Webflow Questions