Jump to content

How to Add Javascript to Block Button in Squarespace 7.1

Recommended Posts

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!

Edited by brandi_sqspace
Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

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

 

Edited by brandi_sqspace
Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

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

 

Link to comment
  • 1 year later...
  • 4 weeks later...

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!

Link to comment
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

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

Link to comment
  • 1 year later...

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>

 

Link to comment

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.