THILLSON Posted October 30, 2020 Share Posted October 30, 2020 Site URL: https://www.goodservice.coach/customer-led-maturity Hi, OK, this is a newbie question sorry. I'm trying to get the top 3 CTA buttons (FREE 30-MIN CALL) on this page to call the following code and display it as a popup. <!-- 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"></script> <a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/tony-goodservice-coach/customer-strategy-service-assessment?hide_event_type_details=1&text_color=021226&primary_color=f24b59'});return false;">FREE 30-MIN CALL</a> <!-- Calendly link widget end --> I managed to hack together a temporary button (example Lightbox), that works, but when i insert this code in the other sections, the alignment, sizing and text alignment all break. The Buttons I'm trying to replicate are all based on this element I think, but I don't know how to beat it into submission so that it inherits the same styling and placement of the top 3 CTA buttons? <a href="" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Learn more</a> Can anyone help? I'd really appreciate it. cheers Tony WI-Zach 1 Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 I suggest you paste this code in custom code injection under the script and style tag of calendarly widget <script> YUI().use('node', 'event', function (Y) { Y.all(".sqs-block-button-element[href*=calendly-lightbox]").on("click", function(e) { Calendly.initPopupWidget({url: 'https://calendly.com/tony-goodservice-coach/customer-strategy-service-assessment?hide_event_type_details=1&text_color=021226&primary_color=f24b59'}); e.preventDefault(); return false; }); }); </script> Also could you change all of the cta button's url to #calendly-lightbox WI-Zach 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
THILLSON Posted October 30, 2020 Author Share Posted October 30, 2020 Thanks so much for your help. Just a quick question, will that code apply on all sqs-block-button-element buttons site wide? I really need it to only apply to these buttons. Although I will want to do the same thing on other pages. Or does it only apply is the URL of the button is calendly ...? Thank you again for your help 🙂 Tony Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 Just now, THILLSON said: Thanks so much for your help. Just a quick question, will that code apply on all sqs-block-button-element buttons site wide? I really need it to only apply to these buttons. Although I will want to do the same thing on other pages. Or does it only apply is the URL of the button is calendly ...? Thank you again for your help 🙂 Tony I made the code so it only work with the button with the url THILLSON and WI-Zach 1 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
THILLSON Posted October 30, 2020 Author Share Posted October 30, 2020 Hmm, I might have done something wrong as it doesn't seem to be working. I changed the code insert to: <!-- Calendly Lightbox --> <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"> YUI().use('node', 'event', function (Y) { Y.all(".sqs-block-button-element[href*=calendly-lightbox-gsa]").on("click", function(e) { Calendly.initPopupWidget({url: 'https://calendly.com/tony-goodservice-coach/customer-strategy-service-assessment?hide_event_type_details=1&text_color=021226&primary_color=f24b59'}); e.preventDefault(); return false; }); }); </script> <!-- END Calendly Lightbox --> I called it "calendly-lightbox-gsa" as I will want to call different calendly meetings on pther pages. I've also changed the URL to #calendly-lightbox-gsa for each button. But when I test the browser is taking me to https://www.goodservice.coach/customer-led-maturity#calendly-lightbox-gsa Any ideas? cheers Tony Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 Sorry I dont quite get you, I saw the button working here Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
THILLSON Posted October 30, 2020 Author Share Posted October 30, 2020 Very strange, I've tested this on Safari and Chrome. Reloaded both browsers and made sure that AD-blocking was off. This is what happens on my side: https://www.loom.com/share/61948e0624cf46aa8d9e35107ffb0442?from_recorder=1 It just tries to go to page https://www.goodservice.coach/customer-led-maturity#calendly-lightbox-gsa Weird Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 Do you have teamviewer installed i can help checking Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
THILLSON Posted October 30, 2020 Author Share Posted October 30, 2020 Thank you for your help. Unfortunately, I’m not at my computer for the next few hours now. Perhaps if I post on here when I am back on and then i could screen share later. thanks again Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 screen-recorder-fri-oct-30-2020-13-34-07.webm I working on myself, perhap you should clear cache on the page? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
THILLSON Posted October 31, 2020 Author Share Posted October 31, 2020 (edited) Thanks again. I've tried clearing caches in safari and chrome as well as from Firefox on iPhone. Still no luck. Is this fix compatible with Mac OSX based browsers? Here's a recording of the Java Console from Chrome. I notice that your Console showed a message "Custom Java Script for Websites Enabled," but my page load didn't get this message. Could that be the problem/difference? I'm online, if you would be able to look at this via screenshare? thank you again 🙂 Tony Edited October 31, 2020 by THILLSON Link to comment
Beyondspace Posted October 31, 2020 Share Posted October 31, 2020 55 minutes ago, THILLSON said: Thanks again. I've tried clearing caches in safari and chrome as well as from Firefox on iPhone. Still no luck. Is this fix compatible with Mac OSX based browsers? Here's a recording of the Java Console from Chrome. I notice that your Console showed a message "Custom Java Script for Websites Enabled," but my page load didn't get this message. Could that be the problem/difference? I'm online, if you would be able to look at this via screenshare? thank you again 🙂 Tony please pm me with the sharescreen info I think I know what I did wrong WI-Zach 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
mck_stu Posted January 31, 2022 Share Posted January 31, 2022 Hello, Im looking to achieve the same thing.. Could you advise how you go this to work? Also will is work in SS 7.1? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment