ysMurph Posted Wednesday at 03:12 AM Posted Wednesday at 03:12 AM 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.
tuanphan Posted Thursday at 09:12 AM Posted Thursday at 09:12 AM You can follow this, but in step #3, instead of edit list button, you can edit header button 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!)
ysMurph Posted Friday at 04:27 AM Author Posted Friday at 04:27 AM 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) Click on the Button Block to open the Button Settings. 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. 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>
tuanphan Posted yesterday at 03:35 AM Posted yesterday at 03:35 AM If your code, update ID here, if you use multiple id, separate with comma symbol 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment