style code block button to use built in squarespace button styling settings or CSS

Hi all, tyring to make a code block button that pulls content from code injection in the header to look like the rest of my standard buttons. But I'm unable (unaware of how) to style that code to change the look of this button. 

This is integrating code from Clock PMS for hotel management software. The button works. Just can't target it to style. Would appreciate any and all help here. THANKS.

See below: the "book now" button is the default. The "view all rooms" button is the goal. Buttons are just above the footer currently.

Can you share link to this page? We can help you style it easier

On 11/18/2023 at 1:17 AM, tuanphan said:

Can you share link to this page? We can help you style it easier

of course, thought I had, but here it is. 

https://www.thefrenchmenhotel.com

On 11/19/2023 at 11:50 AM, lamdra said:

of course, thought I had, but here it is. 

https://www.thefrenchmenhotel.com

@tuanphan were you able to take a look? Appreciate the help. Thanks.

On 11/22/2023 at 2:05 AM, lamdra said:

@tuanphan were you able to take a look? Appreciate the help. Thanks.

Add this code to Website > Website Tools > Custom CSS

div.code-block button {
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    background-color: transparent !important;
    color: var(--primaryButtonBackgroundColor) !important;
    font-weight: 600;
    padding: 10px 20px !important;
}

Awesome @tuanphan, this is working but still hoping to tweak it a little bit. I'm setting the font to the same settings but it appears heavier than the site setting. 

this is my font styling in the code vs squarespace

    font-family: rigid square;
  font-size: .75rem; 
  font-weight: 700 !important;
  letter-spacing: .15em !important;
    padding: 12px 20px !important;
}

I'd also like to know a couple more things...

- How can I center the button in the code block?

- Is it possible to use this code in the header button so that the checkout opens within the site like this button does?

Thanks for all your help as always!

#1. Add this code under

div.code-block {
    text-align: center;
}

#2. Add this code to Website Tools (under Not Linked) > Code Injection > Footer

Note: DO NOT add to Custom CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<button type="button" data-clock-pms-wbe-button=""> BOOK NOW </button>').insertAfter('header#header a.btn');
});
</script>
<style>
  header#header button {
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    background-color: transparent !important;
    color: var(--primaryButtonBackgroundColor) !important;
    font-family: rigid square;
    font-size: .75rem;
    font-family: rigid square;
    font-size: .75rem;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    padding: 12px 20px !important;
}
  a.btn {
  display: none !important;
  }
</style>

On 12/2/2023 at 8:14 PM, tuanphan said:

#1. Add this code under

div.code-block {
    text-align: center;
}

#2. Add this code to Website Tools (under Not Linked) > Code Injection > Footer

Note: DO NOT add to Custom CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<button type="button" data-clock-pms-wbe-button=""> BOOK NOW </button>').insertAfter('header#header a.btn');
});
</script>
<style>
  header#header button {
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    background-color: transparent !important;
    color: var(--primaryButtonBackgroundColor) !important;
    font-family: rigid square;
    font-size: .75rem;
    font-family: rigid square;
    font-size: .75rem;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    padding: 12px 20px !important;
}
  a.btn {
  display: none !important;
  }
</style>

 

Hi @tuanphan the code worked to replace the header button, however the button doesn't do anything currently. I can't leave it up there since I need the button to work and the site is live. Is there a different approach?

It also leaves a border around the burger nav on mobile. See below. 

Lastly, the custom font is not displaying in Safari. Is there a reason for that? See below for "book now" button font.

Thanks again.

On 12/5/2023 at 2:58 AM, lamdra said:

Hi @tuanphan the code worked to replace the header button, however the button doesn't do anything currently. I can't leave it up there since I need the button to work and the site is live. Is there a different approach?

It also leaves a border around the burger nav on mobile. See below. 

Lastly, the custom font is not displaying in Safari. Is there a reason for that? See below for "book now" button font.

Thanks again.

 

You can duplicate the site & keep code there, we can check it easier

4 hours ago, tuanphan said:

You can duplicate the site & keep code there, we can check it easier

Got it. Duplicate site is setup with the code you gave inserted into header. 

https://bluebird-dragonfly-f23h.squarespace.com/

password: french

You'll see that the BOOK NOW buttons throughout the site  are able to call the booking integration. But the one we just put in the header does not. Thanks again.

Do you have full code of the software? I think we need to add both button code + other code to header.

Or you have code in Code Block only?

On 12/8/2023 at 2:17 AM, tuanphan said:

Do you have full code of the software? I think we need to add both button code + other code to header.

Or you have code in Code Block only?

The only other code what is in the site header currently which is this:

<link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.css">
<link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-reminder.css">
<script defer src="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    window.clockPmsWbeInit({
      wbeBaseUrl: "https://sky-us1.clock-software.com/spa/pms-wbe/#/hotel/14492",
      defaultMode: "standard",
      roundedCorners: true,
      language: null,
    });
    
    document.querySelectorAll("[data-clock-pms-wbe-form]").forEach((form) => {
      form.addEventListener("submit", (e) => {
        e.preventDefault();
  
        const formData = new FormData(e.target);
  
        window.clockPmsWbeShow({
          arrival: formData.get("arrival"),
          departure: formData.get("departure"),
          // adults: ..., // Optional. Default value if omitted: 2. Expects an integer or null.
          // children: ..., // Optional. Default value if omitted: 0. Expects an integer or null.
          // childrenAges: ..., // Optional. Default value if omitted: []. Expects an array of integers. Example: [5, 8]
          bonusCode: formData.get("bonusCode"),
          companyCode: formData.get("companyCode"),
          blockCode: formData.get("blockCode"),
          roomTypeIds: [],
          rateIds: [],
          submit: true,
        });
      });
    });
  });
</script>

Then the code block is for the buttons only:

<button type = "button" data-clock-pms-wbe-button> BOOK NOW </button>
 

Do I need to add more code into the header button?