Jump to content

HELP! Add Calendly Embedding Code to List Buttons

Recommended Posts

  • Replies 13
  • Views 277
  • Created
  • Last Reply

Top Posters In This Topic

Hi @designfordummies, what do you want the button to do once clicked? 

One option is to use the link, so when clicked on, it opens the Calendly event in a new browser.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

I'd like the Calendly pop up to open in a lightbox like it normally would if I embedded it into a code block. This is the code Calendly provided for a pop-up text link:

<!-- 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/nslive/markerboardceu'});return false;">Click to Schedule</a>
<!-- Calendly link widget end -->

All scheduling needs to remain on the site, not redirect to Calendly.

Link to comment

#1. First, add Calendly code to Page Header Code Injection (Page where you use List Section)

image.thumb.png.859e7131478a40ad536ddd8d01e2a51f.png

it will appear on top of page

image.png.17d7b315802197977a427cdb4a643a48.png

#2. Use this code to Custom CSS box

a[onclick*="Calendly"] {
    position: fixed;
    z-index: 99999;
    left: 30px;
    bottom: 30px;
    visibility: hidden;
}

image.png.bc5bed38d92789bf50f23e28b445198d.png

#3. Edit List Section Button > Add this URL to button.
and make sure "Open in New Tab" option is disabled

image.thumb.png.4cc2792e5f42520b544fc56d2bbb4775.png

#4. Add this code to Page Header Code Injection, under Calendly code you added in #1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', 'a[href="#Calendly"]', function(event) { 
    event.preventDefault(); 
    $('a[onclick*="Calendly"]').click(); 
});
</script>

image.thumb.png.fc3d9c6876f56922a4a63685acf31045.png

#5. Result

When clicking List button (Learn more button), Calendly Popup will appear.

image.thumb.png.9c89d12938f6cac6a0a01d4f1f4c9005.png

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
On 6/7/2024 at 4:40 AM, designfordummies said:

@tuanphan If I want to connect different calendly links to each appropriate list item button, would I simple repeat the code in the page header injection and change URL's within as needed?

I haven't tested this yet (I havent used Calendly, so I'm not sure how it will generate the id), so if you can share some calendly items code, I can test easier.

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

@tuanphan

Site link: https://nslive.us/presentation-scheduling

 Here are a few of the snippets (I'll have 9 total): 

CEU: WRITABLE SURFACES FOR MODERN INTERIORS
<!-- 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/nslive/markerboardceu'});return false;">Schedule time with us</a>
<!-- Calendly link widget end -->
 
CEU: ACOUSTICS AND THE MODERN HUMAN
<!-- 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/nslive/acousticsceu'});return false;">Schedule time with us</a>
<!-- Calendly link widget end -->
 
SOLACE
<!-- 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/nslive/solace-update-10-min'});return false;">Schedule time with us</a>
<!-- Calendly link widget end -->
 
DEKO
<!-- 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/nslive/deko-update-10-min'});return false;">Schedule time with us</a>
<!-- Calendly link widget end -->
Link to comment

Remove all steps you followed above

Next, follow step #1, #2 above

with step #3, Edit List Item buttons, enter these urls to buttons

  • #marketboardceu
  • #acousticsceu
  • #solace
  • #deko

Next, paste this code to Page Header Code Injection or Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', 'a[href="#marketboardceu"]', function(event) { 
    event.preventDefault(); 
    $('a[onclick*="markerboardceu"]').click(); 
});
</script>
<script>
$(document).on('click', 'a[href="#acousticsceu"]', function(event) { 
    event.preventDefault(); 
    $('a[onclick*="acousticsceu"]').click(); 
});
</script>
<script>
$(document).on('click', 'a[href="#solace"]', function(event) { 
    event.preventDefault(); 
    $('a[onclick*="solace"]').click(); 
});
</script>
<script>
$(document).on('click', 'a[href="#deko"]', function(event) { 
    event.preventDefault(); 
    $('a[onclick*="deko"]').click(); 
});
</script>

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.