Jump to content

Adding custom code to a button

Recommended Posts

It appears you may be using some Javascript in your site? Are you on the business plan or above?

If yes on the business plan. I suggest using a standard SS button block and then using some Javascript to add the needed class.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

The custom code would be added in a code block, Page Settings > Advanced > Page Header Code Injection, or Settings > Advanced > Code Injection > FOOTER.

If you can point us to a page with the button, describe which one, and give us the class that needs to be added we can probably come up with some code for you.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  /*
  
    begin add class(es) to button
    
    Version    : 0.1d0
    
    SS Version : 7.1
    
    By         : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    // enter button block id without the #
    
    const buttonBlockId = '[enter button block id without the # here between single quotes]';
    
    // do not change anything below, there be the borg here
    
    window.addEventListener ( 'DOMContentLoaded', ( ) => {
    
      document.querySelector ( '#' + buttonBlockId + ' a' )
      
        .classList
        
        .add ( 'button', 'wt-embed--trigger' )
        
      } );
      
    /* end add class(es) to button */
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you. I don't know code well enough to know if this is safe to add to my website. It looks like there's additional stuff in here. It just worries me a bit about what I'd be putting on my website. I'm just not familiar with all of this. 

Link to comment

The code is pretty minimal. There is an event listener to wait for the page to be loaded before running the code. The queryselector finds the button. addClass adds the classes.

If you don't feel comfortable using it, no worries.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 years later...
On 7/4/2021 at 12:51 AM, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  /*
  
    begin add class(es) to button
    
    Version    : 0.1d0
    
    SS Version : 7.1
    
    By         : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    // enter button block id without the #
    
    const buttonBlockId = '[enter button block id without the # here between single quotes]';
    
    // do not change anything below, there be the borg here
    
    window.addEventListener ( 'DOMContentLoaded', ( ) => {
    
      document.querySelector ( '#' + buttonBlockId + ' a' )
      
        .classList
        
        .add ( 'button', 'wt-embed--trigger' )
        
      } );
      
    /* end add class(es) to button */
    
  </script>

Let us know how it goes.

This code works for me just fine. Anyone who is struggling with adding Hubspot CTAs 'Trigger on button click' code snippet to external pages. Look up this code. 

My snippet was 'hs-cta-trigger-button hs-cta-trigger-button-117565208857', and I put them like '.add ('hs-cta-trigger-button', 'hs-cta-trigger-button-117565208857'). Other than that, I only entered block ID without # as the instruction explained.

Below is my code. I hope it helps.

<script>

const buttonBlockId = 'block-9fe7a9eb09a9282784ff';
    
    window.addEventListener ( 'DOMContentLoaded', ( ) => {
    
      document.querySelector ( '#' + buttonBlockId + ' a' )
      
        .classList
        
        .add ( 'hs-cta-trigger-button', 'hs-cta-trigger-button-117565208857')
        
      } );
          
  </script>

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.