How to restyle a Calendly Popup Text as a button on my site

Site URL: https://meetfloat.com/member-portal-test

I'm trying to restyle my Calendly integration as a button, so that it looks a bit better on my site. Right now, the embed works as a text hyperlink that someone can click to pull up a Calendly form in the site, but I'd like the hyperlink to be tied to a button with text, color, size, etc. of my choosing. 

Any help with how the html would look like would be much appreciated! For reference, this is the HTML for the Calendly text pop-up: 

<!-- 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/float-care/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

On 8/29/2021 at 8:23 AM, Tamara8928 said:

Site URL: https://meetfloat.com/member-portal-test

I'm trying to restyle my Calendly integration as a button, so that it looks a bit better on my site. Right now, the embed works as a text hyperlink that someone can click to pull up a Calendly form in the site, but I'd like the hyperlink to be tied to a button with text, color, size, etc. of my choosing. 

Any help with how the html would look like would be much appreciated! For reference, this is the HTML for the Calendly text pop-up: 

<!-- 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/float-care/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

Add to Design > Custom CSS

div#block-ab848de63c80eb47271a a {
    color: #fff;
    background-color: #2c88d8;
    border-color: #2c88d8;
    padding: 1.3em 2.71em;
}

I was searching forever for this! Finally, I just inspected the code on the calendly example sites and I was able to do it with the code below. If you're using Sqspace 7.1, the button should align with the design colors you're using in the section you place it. Customize the colors for your brand and remove <center> & </center> if you don't want to center your button: 

<center><button onclick="Calendly.initPopupWidget({url:'YOURLINKbackground_color=A8D5E2&primary_color=1c6e8c'});return false;"class="sqs-block-button-element--medium sqs-block-button-element">BUTTON TEXT</button></center>

On 12/29/2021 at 2:05 AM, luminate said:

I was searching forever for this! Finally, I just inspected the code on the calendly example sites and I was able to do it with the code below. If you're using Sqspace 7.1, the button should align with the design colors you're using in the section you place it. Customize the colors for your brand and remove <center> & </center> if you don't want to center your button: 

 

<center><button onclick="Calendly.initPopupWidget({url:'YOURLINKbackground_color=A8D5E2&primary_color=1c6e8c'});return false;"class="sqs-block-button-element--medium sqs-block-button-element">BUTTON TEXT</button></center>

Hi! Here exactly do I add this? I tried adding it in the code block and although the button appears, I cant seem to link it to open the calendar. Thank you! 

in the url I am writing my normal calendly link. 

On 10/12/2022 at 1:21 AM, CristinaX said:

Hi! Here exactly do I add this? I tried adding it in the code block and although the button appears, I cant seem to link it to open the calendar. Thank you! 

in the url I am writing my normal calendly link. 

Ca you share Calendly code + link to your site?

This was super helpful @luminate, though I had the same problem as @CristinaX - I could get the button to show, but couldn't get the calendly to pop up. I removed "background_color=A8D5E2&primary_color=1c6e8c" from the code and that allowed the Calendly pop up to appear when clicking the button.

However, now I'm having trouble customizing the button with my font and colors. I tried the Custom CSS  @tuanphan suggested, and i see some of the changes (ie. yellow background showing up), but the grayish button from @luminate's code is still showing on top. Any ideas on how to change this?

url: https://thedoulaemily.com/home-1

Custom CSS code:

//customize calendly button
#block-yui_3_17_2_1_1678935751494_102600
{
 border-radius: 7.2px; 
font-family: 'Montserrat'; 
font-weight: 400; 
letter-spacing: 0.2em; 
font-size: 1rem; 
text-transform: uppercase; 
padding: 2px 40px; 
background-color: #E2B02B;
}
 

On 3/17/2023 at 2:35 AM, ERabe said:

This was super helpful @luminate, though I had the same problem as @CristinaX - I could get the button to show, but couldn't get the calendly to pop up. I removed "background_color=A8D5E2&primary_color=1c6e8c" from the code and that allowed the Calendly pop up to appear when clicking the button.

However, now I'm having trouble customizing the button with my font and colors. I tried the Custom CSS  @tuanphan suggested, and i see some of the changes (ie. yellow background showing up), but the grayish button from @luminate's code is still showing on top. Any ideas on how to change this?

url: https://thedoulaemily.com/home-1

Custom CSS code:

//customize calendly button
#block-yui_3_17_2_1_1678935751494_102600
{
 border-radius: 7.2px; 
font-family: 'Montserrat'; 
font-weight: 400; 
letter-spacing: 0.2em; 
font-size: 1rem; 
text-transform: uppercase; 
padding: 2px 40px; 
background-color: #E2B02B;
}
 

Don't remove any code in your current code.

Add this to Design > Custom CSS

button[onclick*="Calendly"] {
    background-color: Transparent !important;
    border: none !important;
}
div#block-yui_3_17_2_1_1678935751494_102600 {
    justify-content: center !important;
}