Tamara8928 Posted August 29, 2021 Share Posted August 29, 2021 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 --> Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
luminate Posted December 29, 2021 Share Posted December 29, 2021 (edited) 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> Edited December 29, 2021 by luminate Beyondspace 1 Link to comment
CristinaX Posted October 11, 2022 Share Posted October 11, 2022 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. Link to comment
tuanphan Posted October 15, 2022 Share Posted October 15, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ERabe Posted March 16, 2023 Share Posted March 16, 2023 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; } Link to comment
tuanphan Posted March 19, 2023 Share Posted March 19, 2023 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment