Click List Button – Open Calendly Popup

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

it will appear on top of the site

#2. Use this code to Custom CSS box to hide it.

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

#3. Edit List Section Button > Add this URL to the button.

and make sure the “Open link in New Tab” option is disabled

• #Calendly

#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 the List button (Learn more button), a Calendly Popup will appear.