Jump to content

How to add Custom button block ID in Squarespace? Don't see any option under button settings.

Go to solution Solved by Beyondspace,

Recommended Posts

Posted

Site URL: https://www.sunburstpsych.com/

How can I add a custom button ID?  I see blogs suggesting that I can do the following but dont see options for settings anywhere. What I'm trying to do is update all buttons with a custom ID to have a particular behavior such as a calendly popup. I'd like to only do this for select buttons and not all buttons on the website. Any help is much appreciated. 

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.

 

Screenshot 2024-11-28 at 8.12.05 PM.png

Posted
8 minutes ago, ysMurph said:

Site URL: https://www.sunburstpsych.com/

How can I add a custom button ID?  I see blogs suggesting that I can do the following but dont see options for settings anywhere. What I'm trying to do is update all buttons with a custom ID to have a particular behavior such as a calendly popup. I'd like to only do this for select buttons and not all buttons on the website. Any help is much appreciated. 

 

Screenshot 2024-11-28 at 8.12.05 PM.png

There is no custom id in button block, but you can target these using their href attribute, what is the url you will put to the buttons

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted

https://calendly.com/sunburst-psych

I'd like to be able to have these select buttons all across the website go to Calendly in-page popup via link-widget code (shown below). I only need select buttons per page doing this, not all of them. 


<!-- 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/sunburst-psych'});return false;">Schedule Now</a>
<!-- Calendly link widget end -->
  • Solution
Posted (edited)
19 minutes ago, ysMurph said:

https://calendly.com/sunburst-psych

I'd like to be able to have these select buttons all across the website go to Calendly in-page popup via link-widget code (shown below). I only need select buttons per page doing this, not all of them. 


<!-- 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/sunburst-psych'});return false;">Schedule Now</a>
<!-- Calendly link widget end -->

Attach link to the button like this #calendly-sunburst

<!-- 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>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const calendlyLinks = document.querySelectorAll('a[href*="calendly-sunburst"]');
    calendlyLinks.forEach(function (link) {
      link.addEventListener("click", function (e) {
        e.preventDefault();
        Calendly.initPopupWidget({ url: 'https://calendly.com/sunburst-psych' });
      });
    });
  });
</script>
<!-- Calendly link widget end -->

the modified code will find all the match button for your and trigger the popup, add this code to Footer code injection

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

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.