Webflow add Calendly popup to a text or button.
--
This article is for everyone, who wishes to include Calendly into there Webflow website. The following steps are required to add calendly to your website.
1. Click on the button where you wish the popup to open. It can also be a text element, link, or anything else, which an id can be given and is clickable.
after you clicked on the element you need to switch to the settings of this element. There you can find the position of setting the element ID. In the file enter the name startYourfreeTrialBtn
2. Add a custom code element.
Add a custom code element to your website via clicking on the elements tab and choosing the embed component.
3. Add the custom code
Add the following custom code. And replace your information(meeting link and if you used another button id as the example also replace the id). Otherwise just copy paste the code.
<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<!-- Calendly link widget end -->
<script>
function openCalendlyPopUp(){
//this is your meeting direct link
var meetingDirectUrl = "https://calendly.com/max-mustermann/15min";
// add your Calendly URL into the next row
Calendly.initPopupWidget({ url: meetingDirectUrl });
return false;
}
// Start your free trial button add click event
var elementButtonId = 'startYourfreeTrialBtn';
document.getElementById(elementButtonId).addEventListener("click", function(){openCalendlyPopUp()});</script>
4. Publish your Website.
Click on the publish button and you should see something like this here if you click on the indicated button.
I hope the article helped. Happy coding!
