I’m wanting visitors to have the option to book a call with me, but not be directed away from my website. I have CTA buttons on my website to book a call via Calendly and would like a pop-up modal to appear when clicking on the button.
The below html can be used to add a pop-up modal, but it adds a string of text that opens the modal when it’s selected. Ideally, I would like to have the CTA show as a button rather than text.
<!-- 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>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/simpla-worfklows-hannahm/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->
Amazing! Thank you so much. I’m not too familiar with coding, so appreciate the help. Follow-up question: is there a way for the button to adopt the styling from another button? I entered in the code, but the button is off-centered and doesn’t change color when hovering over it. How do I center it and change the hover color?
Here’s the live page: Basic Package | Tailored coaching and consulting to setup your ideal workflow in Trello/Asana | Simpla Workflows
You can see the button generated from the code (which is positioned to the left), and the original button directly below it.
Add a hover class after the calendly-widget class, inside the style tags, and style any element you want to be different on hover. In this example I made the background color red as an obvious example.
.calendly-widget:hover {
background-color: red;
}
I would need to see the button in your read only project to give advice on how to center it. I see the button in your published project but I don’t see the button in your read only project.
There is more to know about button styling that you might imagine. Most of the time Webflow takes care of all this for you however in this case because we are pulling in a widget from Calendly it is necessary to jump into the code. Here’s a good article if you want to explore more.
Hi, thanks for your input. I’m currently experiencing the same issue when trying to style the inline text widget popup as close to my CTA button as possible. I’ve applied the style code inside the HTML Embed Code Editor, and it’s not showing up. It does say that the Custom code is not validated. Incorrect code may cause issues with the published page. Do you mind taking a look? I have the inline link published above the desired CTA button.
To ensure visitors can book a call with you without leaving your website, you can utilize a pop-up modal instead of directing them to Calendly’s website. Below is the HTML code with a modified CTA button that triggers a pop-up modal:
<!-- 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>
<button onclick="openModal()">Schedule time with me</button>
<!-- Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<div id="calendlyPopupWidget" style="max-width: 400px; height: 600px;"></div>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
Calendly.initPopupWidget({url: 'https://calendly.com/simpla-worfklows-hannahm/30min'});
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
</script>
<!-- Calendly link widget end -->
This code creates a button labeled “Schedule time with me.” When clicked, it opens a pop-up modal containing the Calendly widget. Visitors can schedule a call without leaving your website. To implement this code, simply copy and paste it into your website’s HTML where you want the button to appear.
For more customization options or if you encounter any issues, feel free to visit ManageNext for further assistance.
