OnClick function for Button

Site URL: https://dtmg.io

Is there a way to add an onclick function to a button's href code?  I've been googling and can't find anything.  Thank you! 

We can't see your site without password. What do you want a button to do?

What do you want to do?

https://www.w3schools.com/jsref/event_onclick.asp

I have the same question. That is exactly what I intend @tuanphan. but do you know if that is possible with the button block in squarespace? or would I have to insert the button as html code? if so, can I style it to look like the button block in squarespace?

did you find an answear for this @WHOisDANE?

Update: Found the solution for this with some googling and fiddling with code from other posts. Posting it here in case someone else needs it:

<div class="sqs-block button-block sqs-block-button">
  <div align="center">
  <a onclick="myFunction()" 
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">Button Text ></a>
  </div>
</div>

<script>
... your script to be triggered on click...
</script>

You almost had it Fabians. You just need to define the Javascript function that you're calling, like this:

<div class="sqs-block button-block sqs-block-button">
  <div align="left">
  <a onclick="myFunction()" 
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">Button Text</a>
  </div>
</div>

<script>
function myFunction () {

     (your javascript to be triggered goes here)

}
</script>

On 11/27/2020 at 11:08 PM, fredric100 said:

You almost had it Fabians. You just need to define the Javascript function that you're calling, like this:

<div class="sqs-block button-block sqs-block-button">
  <div align="left">
  <a onclick="myFunction()" 
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">Button Text</a>
  </div>
</div>

<script>
function myFunction () {

     (your javascript to be triggered goes here)

}
</script>

When I try this and replace the (your javascript to be triggered goes here), the button looks great. Upon testing, it does nothing. Below is the code I used...what am I missing?

<div class="sqs-block button-block sqs-block-button">
  <div align="center">
  <a onclick="myFunction()" 
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">I'm ready to watch the class</a>
  </div>
</div>

<script>
function myFunction () {

<a href="javascript:;" onclick="ml_webform_3970552('show')">
}
</script>

On 5/10/2021 at 5:36 AM, CHSB said:

When I try this and replace the (your javascript to be triggered goes here), the button looks great. Upon testing, it does nothing. Below is the code I used...what am I missing?

 

<div class="sqs-block button-block sqs-block-button">
  <div align="center">
  <a onclick="myFunction()" 
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">I'm ready to watch the class</a>
  </div>
</div>

<script>
function myFunction () {

<a href="javascript:;" onclick="ml_webform_3970552('show')">
}
</script>

Can you share link to page where you added this code? We can check easier

@WHOisDANEI've been looking for a solution to get the cta button in the header navigation to trigger a pop-up.  Your site has that with that "1" button on 

How did you do it?

On 8/13/2021 at 7:35 AM, GlenwoodMedia said:

@WHOisDANEI've been looking for a solution to get the cta button in the header navigation to trigger a pop-up.  Your site has that with that "1" button on 

How did you do it?

I don't see cta button on header nav. Which button are you referring to?

@tuanphan @WHOisDANE Were you ever able to find a solution? I was trying to achieve the same thing, to add a Calendly popup to my header actions button. 

I attempted a workaround by absolutely positioning a code block that I added to the footer in the top right of my screen (so it looks like the header button, but it's actually not). However, the button is not working on the homepage or the "what we do page" - but it is working on all other subpages. Sometimes clicking on the button prevents scrolling on the page altogether, so I have to find another way.

Has anyone found a way to use the standard header button but call a Calendly popup?

For reference, my site is: https://iced-media-redesign.squarespace.com/ (password: icedmedia)

@Victoria916

You might have better luck with using the SS built-in CTA button. Set the URL for it to #.

Then move your link and script tags into Settings > Advanced > 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" async=""></script>

By the way that link tag is corrupted. You'll want to go back and get a fresh copy of that line from where you got it.

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  /*
  
    begin header cta calendly
    
    Version     : 0.1d1
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    const url = '[enter calendly url here between single quotes]';
    
    // do not change anything below, there be the borg here
    
    window.addEventListener ( 'DOMContentLoaded', ( ) => {
    
      const selector = [
      
        '.header-actions-action--cta .btn', // desktop
        
        '.header-menu .header-menu-cta' // mobile
        
        ]
        
        .join ( ', ' );
        
      const cta = document.querySelectorAll ( selector );
      
      cta.forEach ( item => {
      
        item.onclick = event => {
        
          Calendly.initPopupWidget ( { 'url' : url } );
          
          return false;
          
          };
          
        } );
        
      } );
      
    /* end header cta calendly */
    
  </script>

Let us know how it goes.

Whew, thanks so much, @creedon. That does work, however I'm still having the same issue of the button not working on the homepage or the 'what we do' page, and only working on the other subpages. Is there some conflict I should be looking for?

@Victoria916

I've done some digging but an answer is not immediately forthcoming. 😞

I'll cogitate on this one and perhaps inspiration will strike!

In the mean time if anyone has a clue as to what is going on please feel free to pitch in!

@creedon Thanks for looking into it! I appreciate it. 

@Victoria916

I found the problem.

You need to fix the broken link tag I mentioned previously.

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">

The reason it works on some pages and not others is that the working pages have duplicate code on them with the correct link tag.

I suggest removing all previous attempts at this code so you don't have multiple copies floating around waiting to cause trouble.

Let us know how it goes.

*facepalm* of course! Wow, thanks so much, @creedon, you are a lifesaver. Apologies for missing your earlier note, but I can't thank you enough for your help!

Hey @creedon I was trying to achieve the same thing as @Victoria916 in having the button in the header load a calendy popup and your codes from this post worked, but only when in desktop mode. Whenever I try tapping the button on the mobile version nothing happens

13 hours ago, lost-bro-sos said:

Whenever I try tapping the button on the mobile version nothing happens

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

4 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks for the response @creedon here is the website

https://hibiscus-lettuce-heam.squarespace.com

pw: 1234

On 1/26/2022 at 10:37 PM, lost-bro-sos said:

Whenever I try tapping the button on the mobile version nothing happens

I have updated my code in my September 1, 2021 post.

Let us know how it goes.

@creedon thanks for trying to help. I have tried the updated code but the same issue still persist

1 hour ago, llost-bro-sos said:

I have tried the updated code

I still see the old code installed on your site.

Hi forum

I am trying to add in onclick value to a Order Now Button - which I highlight in circle below. I tried the code listed above in this thread - made some changes and added that to header. I got a new banner button that did not click or take me to a new window.

Here is the adjusted Code I placed in the Header

<div class="sqs-block button-block sqs-block-button">
  <div align="left">
  <a onclick="myFunction()"
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">Order Now</a>
  </div>
</div>

<script>
function myFunction () {

<a href="javascript:;" onclick="return gtag_report_conversion('https://direct.chownow.com/order/14172/locations/22329')">
}
</script>

Here is what I need to Insert:

Add the code to a text link: In the code below, replace "http://example.com/your-link" with the URL for your website or telephone link, and replace "Download now!" with your link text.

<a onclick="return gtag_report_conversion('https://direct.chownow.com/order/14172/locations/2232');" href="https://direct.chownow.com/order/14172/locations/2232">Order Now</a>

Thanks for the help.

On 4/28/2022 at 4:12 AM, pkodigital said:

Hi forum

I am trying to add in onclick value to a Order Now Button - which I highlight in circle below. I tried the code listed above in this thread - made some changes and added that to header. I got a new banner button that did not click or take me to a new window.

Here is the adjusted Code I placed in the Header

<div class="sqs-block button-block sqs-block-button">
  <div align="left">
  <a onclick="myFunction()"
     class="sqs-block-button-element--large sqs-block-button-element" target="_blank">Order Now</a>
  </div>
</div>

<script>
function myFunction () {

<a href="javascript:;" onclick="return gtag_report_conversion('https://direct.chownow.com/order/14172/locations/22329')">
}
</script>

Here is what I need to Insert:

Add the code to a text link: In the code below, replace "http://example.com/your-link" with the URL for your website or telephone link, and replace "Download now!" with your link text.

<a onclick="return gtag_report_conversion('https://direct.chownow.com/order/14172/locations/2232');" href="https://direct.chownow.com/order/14172/locations/2232">Order Now</a>

Thanks for the help.

 

What is your site url?