Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Code Help


THILLSON

Question

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

 

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I made the code so it only work with the button with the url 

Posted Images

11 answers to this question

Recommended Posts

  • 0

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

image.thumb.png.f8b1fa311b3537bdf5dd2d325e49b8b5.png

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post
  • 0

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 post
  • 0
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 

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post
  • 0

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 post
  • 0

Sorry I dont quite get you, I saw the button working here

image.thumb.png.d8ab93e2c9a2b77bf8af82e023f026cb.png

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post
  • 0

Do you have teamviewer installed i can help checking

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post
  • 0

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 post
  • 0

I working on myself, perhap you should clear cache on the page?

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post
  • 0

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 by THILLSON
Link to post
  • 0
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

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...