Streaming live at 10am (PST)

How to show Calendly pop-up modal

Hi there!

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 -->

Thank you! :slight_smile:

Here is my site Read-Only: Webflow - Simpla Workflows (live)

Add a class to the text link for example - class=“calendly-widget”. You can then style the button how you like.

<style type="text/css">
.calendly-widget { 
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 50px;
    margin-top: 30px;
    display: block;
    width: 200px;
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
 }
</style>

<!-- 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="" class="calendly-widget" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/simpla-worfklows-hannahm/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

This example would look like the below however you can adjust to look however you like.

class

You could use an HTML button generator and then paste the final code into the calendly-widget class if you a new to coding.

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 to setup your ideal workflow in Trello/Asana
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.

Great, thank you! The hover color is working :slight_smile: I’ve created a new read-only link: Webflow - Simpla Workflows (live)

Hopefully that will show the embedded HTML. If not, I can share screenshots maybe? Thanks so much for your help :slight_smile:

Try adding a “margin-left and right - auto” to the class as shown below.

.calendly-widget { 
	background-color: black;
    color: white;
    padding: 20px;
    border-radius: 50px;
    margin-top: 30px;
    display: block;
    width: 200px;
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
 }
 .calendly-widget:hover { 
	background-color: red;
 }

Wow thank you so much. Everything looks good now! :star_struck: