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

OnClick function for Button


WHOisDANE

Question

24 answers to this question

Recommended Posts

  • 0

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>

 

Link to comment
  • 0

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>

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0

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

Edited by creedon
version 0.1d1

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Edited by llost-bro-sos
Link to comment
  • 0

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.

image.png

Link to comment
  • 0
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.

 

image.png

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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