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

How to Add Javascript to Block Button in Squarespace 7.1


brandi_sqspace

Question

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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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

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

6 answers to this question

Recommended Posts

  • 0

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

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

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

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

Create an account or sign in to comment

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


×
×
  • Create New...