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

OnClick function for Button


WHOisDANE

Question

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

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.

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.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    const url = 'https://calendly.com/victoria-digital/consult';
    
    // do not change anything below, there be the borg here
    
    window.addEventListener ( 'DOMContentLoaded', ( ) => {
    
      const cta =
      
        document.querySelectorAll ( '.header-actions-action--cta .btn' );
        
      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

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

Create an account or sign in to comment

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

×
×
  • Create New...