Adding custom code to a button

Site URL: https://www.therapistsinbaltimore.com

Hello,

I need to add a class to the html code in one of my buttons on my contact page (it will open a chat). How do I do this? Do I use the code block? If so, does anyone know the code for a button or otherwise, how to custom code a button to add a token to the class attribute?

Thank you!

Heather

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.

Thank you. Yes, I have the business plan. Where in the button block can I add code? I see options to include a url, file, email or phone but not custom code. 

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.

That would be incredible. Thank you. The page is: https://www.therapistsinbaltimore.com/talk-to-us-no-contact-form

The class is <a class="button wt-embed--trigger" href="#">Make an Appointment</a>

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.

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. 

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.

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>

What if you want to add this code to a button in the header of your site and you don't have a block ID for the button, there's just collection ID the header? Is there a solution for that button?

On 5/1/2024 at 8:04 AM, Lorialo said:

What if you want to add this code to a button in the header of your site and you don't have a block ID for the button, there's just collection ID the header? Is there a solution for that button?

ID of header button is 

a.btn