How to Add Javascript to Block Button in Squarespace 7.1

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

Hey, amazing people. I have a question that might be pushing the limits of Squarespace, so I'm hoping to get lucky here 🙂 I saw this post in an earlier Forum thread, but I don't think it's quite what I need? Maybe I'm wrong—please tell me if I am!

Site pw: branding

1. Mock "LeadBoxes" from LeadPages
   I'd like to add a Leadpages popup to on-click of buttons in Image Cards. Like on my blog, here (white box, text that reads "Free Survey Tool: Stop Guessing..."). I have the Javascript code from Leadpages, but for a button designed by them:

   <script src="https://embed.lpcontent.net/leadboxes/current/embed.js" async defer></script> <a href="" data-leadbox-popup="2M4HPLXiWwLAuThfhXRuWm" data-leadbox-domain="brandistanley636.lpages.co">Click here to subscribe</a> 

   What I'd like to happen is the user clicks the button in MY Image Card (which reads "Get Them Now") and that java launches that pop-up.

2. Calendly
   Similarly, I have some Image Stacks (Consulting page, two next two each other in white boxes, under How I Can Help").
   I'd love to launch my Calendly scheduler as a pop-up. Only mentioning this because I'm figuring that, if I can sort out how to do the above, I can sort out how to do this on my own, as long as someone helps me know the Image Stack Button class I should use. I think this is the java I'd use from Calendly:

   <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
   <a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/brandingofficehours?primary_color=d2a143'});return false;">Schedule time with me</a>

   Edit, for clarity: I'd love to be able to add different java to individual blocks, so I can change what pops up, if necessary (both on Image Cards and Images Stacks. If that fails, being able to apply the same java to each set (one across all Image Cards and one across all Image Stacks might do.)
   
   Thanks, team! Any help would be SO appreciated!

Hi,

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#block-yui_3_17_2_1_1599412523559_8193 .image-card-wrapper .image-button-wrapper .image-button-inner').html('<a href="" data-leadbox-popup="2M4HPLXiWwLAuThfhXRuWm" data-leadbox-domain="brandistanley636.lpages.co">Click here to subscribe</a>');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Yessss, @IXStudio to the rescue again. 🙂 That worked perfectly.

One more question: For the Calendly function in the "Small Group Calls" Image Stack on this page, here's what I've tried, piecing together what would need to change from the code you gave me for my Image Cards > LeadPages above:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#block-yui_3_17_2_1_1598383782962_13098 .image-card-wrapper .image-button-wrapper .image-button-inner').html('<a href="" onclick="Calendly.initPopupWidget({url: 'calendly.com/brandingofficehours/group'});return false;">GET THEM NOW</a>');
});
</script>

Not working, though. Do you know which piece I'm not getting right?

Here's the original Calendly JS:

<!-- 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/brandingofficehours/group'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

Hi @brandi_sqspace
At the first please add this code in your header injection and let me know.

<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>

Please use the like button if it helps you!

Best,
Leopold

@IXStudio Adding that to my header code injection didn't do anything, unfortunately. Do I also need to do something else? 

Here's what I now have in my code injection:

Header:

<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>

Footer:

<script>
$(document).ready(function() {
$('#block-yui_3_17_2_1_1598383782962_13098 .image-card-wrapper .image-button-wrapper .image-button-inner').html('<a href="" onclick="Calendly.initPopupWidget({url: 'calendly.com/brandingofficehours/group'});return false;">GET THEM NOW</a>');
});
</script>

Please add it at the first @brandi_sqspace, After that let me know please.

Just now, IXStudio said:

Please add it at the first @brandi_sqspace, After that let me know please.

I figured that's what you meant, so it already is the first thing in my Header code injection. Am I misunderstanding something?

Hello, Im trying to do the same for calendly. Did you get this to work? If so, how?

many thanks

I tried to do the same thing and wasn't able to get it to work with this solution.

On 2/3/2022 at 9:24 PM, ashtonwhitney said:

I tried to do the same thing and wasn't able to get it to work with this solution.

You want to add calendy javascript or?

Hi all,

I've added a Calendly Pop-up, which I want it to appear as a button. I have added it to the site, and it used to work. Now the button is not appearing and is hiding content above and below it, when viewing the actual site.

This is the code I used:
<!-- Calendly Popup 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>
    <!-- Insert Squarespace Button -->
    <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
    <div class="sqs-block-button-container--center" data-alignment="center" data-button-size="small">
      <a href="" class="sqs-block-button-element--small sqs-block-button-element" data-initialized='true' onclick="Calendly.showPopupWidget('https://calendly.com/hello-speakeasy');return false;"><font size="3" >Book a Discovery Session</font></a>
    </div></div></div>
<!-- Calendly Popup Widget End -->

Is it because is a JavaScript on a button on a version 7.1 site? if so, is there a way to fix it/go around?

Thank you!

On 3/4/2022 at 7:35 PM, Gracy said:

Hi all,

I've added a Calendly Pop-up, which I want it to appear as a button. I have added it to the site, and it used to work. Now the button is not appearing and is hiding content above and below it, when viewing the actual site.

This is the code I used:
<!-- Calendly Popup 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>
    <!-- Insert Squarespace Button -->
    <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
    <div class="sqs-block-button-container--center" data-alignment="center" data-button-size="small">
      <a href="" class="sqs-block-button-element--small sqs-block-button-element" data-initialized='true' onclick="Calendly.showPopupWidget('https://calendly.com/hello-speakeasy');return false;"><font size="3" >Book a Discovery Session</font></a>
    </div></div></div>
<!-- Calendly Popup Widget End -->

Is it because is a JavaScript on a button on a version 7.1 site? if so, is there a way to fix it/go around?

Thank you!

What is your site url? We can check easier

If anyone else comes searching for this question, this worked for me. Replace "XXXXXX" with your Calendly link details. (This button doesn't respect the content transition like the rest of the page, but I'm okay with that.)

<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>
<div class="sqs-block-button-container sqs-block-button-container--center preSlide slideIn" data-alignment="center" data-button-size="medium" data-button-type="primary" id="yui_3_17_2_1_1694310801193_85">
  <a href="" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/d/xxxxxx'});return false;">
    Schedule a Call
  </a>
</div>