Jump to content

How to update Header button and section button with Calendly link widget/popup

Recommended Posts

Posted

Site URL: https://lute-hypersphere-h2mh.squarespace.com/

Hello, 

I am trying to update the button - both in the header and across the sections to a Calendly link-widget popup so it can open up on the same page (not a new tab). I have my calendly links/code, but cannot seem to figure out how to update an existing button with this function and/or add a consistent button that follows the current color/themes of existing buttons and then have it do a calendly popup. Any help is much appreciated. 

  • Replies 3
  • Views 89
  • Created
  • Last Reply

Top Posters In This Topic

Posted

Thanks, For some more context, there are a couple things I'm trying to do: 

1) For the header that appears on all pages, I'd like the 'Get Started' page to open the calendly popup widget? See image below. 

2) For the buttons across the website, I'd like specific primary buttons to have the same behavior? I found some code via chatGPT that helps me update behavior of all buttons, but I'd like it only target select ones with custom IDs - I can't find the option anywhere to update IDs of button blocks. See code I found for this to add to footer section: 

Quote

Step 2: Add a Custom ID (or Class)

  1. Click on the Button Block to open the Button Settings.

  2. In the Button Block settings, scroll down to the Advanced section, which will provide fields for Custom CSS Class and Custom ID.

    • In the Custom ID field, you can enter a unique ID for the button. For example, if you want the button to trigger a Calendly popup, you might enter calendly-book-now.
  3. Save your changes.

<script type="text/javascript">
  document.querySelectorAll('.sqs-block-button-element--primary').forEach(function(button) {
    button.addEventListener('click', function(event) {
      // Prevent the default link behavior
      event.preventDefault()
      // Open the Calendly popup
      Calendly.initPopupWidget({
        url: 'https://calendly.com/sunburst-psych'  // Replace with your Calendly link
      });
      return false; // Prevents any further default actions
    });
  });
</script>

Screenshot 2024-11-28 at 8.21.11 PM.png

Screenshot 2024-11-28 at 8.12.05 PM.png

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.