HELP! Add Calendly Embedding Code to List Buttons

Looking to embed Calendly events (using Calendly-provided code) into List Item Buttons. Does anyone have a clue how to achieve this? The only options for the buttons are links or files.

Site: nslive.us/presentation-scheduling

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.

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.

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

it will appear on top of page

#2. Use this code to Custom CSS box

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

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

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

#5. Result

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

Thank you so much @tuanphan. However, clicking isn't activating the pop up. Did I plug everything in correctly? See screenshots attached.

Hold on replying to that. After trying in an incognito window it works great.

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

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.

@tuanphan

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

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

@tuanphan Any luck with this request? Appreciate your efforts.

I don't check notifications but check questions from old pages and earlier. Your post was pushed to the front page so I didn't see it. I will check and let you know in the next 1-3 days.

Worked out great. Thank you @tuanphan!

• If you need code for 9 buttons, you can send 9 code, I will give code for all.