WHOisDANE Posted May 20, 2020 Share Posted May 20, 2020 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! Fabians 1 Link to comment
derricksrandomviews Posted May 21, 2020 Share Posted May 21, 2020 We can't see your site without password. What do you want a button to do? Link to comment
tuanphan Posted May 21, 2020 Share Posted May 21, 2020 What do you want to do? https://www.w3schools.com/jsref/event_onclick.asp Fabians 1 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
Fabians Posted July 29, 2020 Share Posted July 29, 2020 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? Link to comment
Fabians Posted July 29, 2020 Share Posted July 29, 2020 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> fredric100 1 Link to comment
fredric100 Posted November 28, 2020 Share Posted November 28, 2020 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
CHSB Posted May 9, 2021 Share Posted May 9, 2021 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
tuanphan Posted May 12, 2021 Share Posted May 12, 2021 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
GlenwoodMedia Posted August 13, 2021 Share Posted August 13, 2021 @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? Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 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
victoria-and-co Posted September 1, 2021 Share Posted September 1, 2021 @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
creedon Posted September 1, 2021 Share Posted September 1, 2021 (edited) @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 January 28, 2022 by creedon version 0.1d1 Selah and victoria-and-co 2 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
victoria-and-co Posted September 1, 2021 Share Posted September 1, 2021 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? creedon 1 Link to comment
creedon Posted September 2, 2021 Share Posted September 2, 2021 (edited) @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 September 2, 2021 by creedon victoria-and-co 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
victoria-and-co Posted September 2, 2021 Share Posted September 2, 2021 @creedon Thanks for looking into it! I appreciate it. Link to comment
creedon Posted September 2, 2021 Share Posted September 2, 2021 (edited) @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 September 2, 2021 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
victoria-and-co Posted September 2, 2021 Share Posted September 2, 2021 *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! creedon 1 Link to comment
lost-bro-sos Posted January 27, 2022 Share Posted January 27, 2022 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 Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 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
llost-bro-sos Posted January 28, 2022 Share Posted January 28, 2022 (edited) 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 January 28, 2022 by llost-bro-sos Link to comment
creedon Posted January 28, 2022 Share Posted January 28, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
llost-bro-sos Posted January 29, 2022 Share Posted January 29, 2022 @creedon thanks for trying to help. I have tried the updated code but the same issue still persist Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 1 hour ago, llost-bro-sos said: I have tried the updated code I still see the old code installed on your site. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
pkodigital Posted April 27, 2022 Share Posted April 27, 2022 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. Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment