Google Scheduler Button CSS Customisation

Hi!

I'm trying to modify the styling of a Google Calendar button I've embedded into my site through a script. This button is for Google Calendar's 'single booking page', 'Button with popup' code.

I've attached images of both the Google Calendar 'Website embed' page, as well as the style of the button on my website.

I'm new to CSS so I don't know how to call on that specific button. I'd wish to have control over button padding, radius of corners, font, font size, font colour, and button hover colour.

Site: https://grouper-fiddle-acdd.squarespace.com/

Password: ZxsZ9YW7Y5tUhCU

Any help is much appreciated!

Thanks!

Hi,

I see you replaced it with a Button Block.

Do you still need help? A few months ago, I helped a member, but my approach is, use Button Block, so you can CSS easier, then apply JS code, to make Google Schedule popup appears when clicking Button Block

Hi @tuanphan, thanks for your reply!

Yes I would love it if you could guide me to make the Google Schedule popup appear when clicking the Button Block 🙂 I think I found your other thread about this, but I couldn't find a guide or code. From my end, I would only wish the popup to appear on click and not on hover.

Thanks @tuanphan!

On 3/11/2024 at 5:38 PM, ChrisMahoney said:

Hi @tuanphan, thanks for your reply!

Yes I would love it if you could guide me to make the Google Schedule popup appear when clicking the Button Block 🙂 I think I found your other thread about this, but I couldn't find a guide or code. From my end, I would only wish the popup to appear on click and not on hover.

Thanks @tuanphan!

You can send me this code, I will try testing on my site then give you full code

Thanks @tuanphan! Here's the code:

<!-- Google Calendar Appointment Scheduling begin -->

<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">

<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>

Thanks!

On 3/14/2024 at 2:36 PM, ChrisMahoney said:

Thanks @tuanphan! Here's the code:

<!-- Google Calendar Appointment Scheduling begin -->

<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">

<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>

Thanks!

Have you sent full code? I think this code missing some thing.

I think under this line, still have some other code. Can you check again

I added that code to my site but nothing appears

Oh goodness you're right, sorry about that @tuanphan! Here's the full code 🙂 Thanks!

<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
  var target = document.currentScript;
  window.addEventListener('load', function() {
    calendar.schedulingButton.load({
      url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ1oPptLqLtSUTNOygFbIjbEveZHVBOE4wohHmzSLto9PSbioOuGAEoo6rzvMAK6GNc8En8Kddrt?gv=true',
      color: '#039BE5',
      label: 'Book an appointment',
      target,
    });
  });
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->

On 3/15/2024 at 10:13 PM, ChrisMahoney said:

Oh goodness you're right, sorry about that @tuanphan! Here's the full code 🙂 Thanks!

<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
  var target = document.currentScript;
  window.addEventListener('load', function() {
    calendar.schedulingButton.load({
      url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ1oPptLqLtSUTNOygFbIjbEveZHVBOE4wohHmzSLto9PSbioOuGAEoo6rzvMAK6GNc8En8Kddrt?gv=true',
      color: '#039BE5',
      label: 'Book an appointment',
      target,
    });
  });
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->

 

I tried creating an example, you try checking

https://tuanphan5-test.squarespace.com/google-scheduler?noredirect

pass: abc

That's exactly what I was after @tuanphan, thanks! Could you kindly provide me with the steps to implement this in my site?

Thanks so much @tuanphan, that worked great!

I have a further two questions if that's OK…

Question 1: There's a similar button for people to schedule a meeting in the Site Header, however when I updated the link to "#google-scheduler" nothing happens. Is there a way we can make it behave the same way as the other button?

Question 2: I had another code block near this button, that placed a vertical line between the button and the text to the right.

The code block just says :

<div class="vertical-line"></div>

and is then styled in CSS.

This line is now hidden as well, I imagine because the Page Header Code Injection you provided is hiding all code blocks. Is there a way we could only target the code block that contains the Google Scheduler code, so that I can see the vertical line again?

Site: https://grouper-fiddle-acdd.squarespace.com/

Password: abc123

Sorry for all the questions, and thanks so much for your help!

1 hour ago, ChrisMahoney said:

Thanks so much @tuanphan, that worked great!

I have a further two questions if that's OK…

Question 1: There's a similar button for people to schedule a meeting in the Site Header, however when I updated the link to "#google-scheduler" nothing happens. Is there a way we can make it behave the same way as the other button?

Question 2: I had another code block near this button, that placed a vertical line between the button and the text to the right.

The code block just says :

<div class="vertical-line"></div>

and is then styled in CSS.

This line is now hidden as well, I imagine because the Page Header Code Injection you provided is hiding all code blocks. Is there a way we could only target the code block that contains the Google Scheduler code, so that I can see the vertical line again?

 

Site: https://grouper-fiddle-acdd.squarespace.com/

Password: abc123

Sorry for all the questions, and thanks so much for your help!

#1. You mean, you want when users click Header button >> Open GG Calendar Lightbox?

I see click Footer button > It open GG Lightbox here

#2. Change this code

to this

<style>
  div#block-yui_3_17_2_1_1710842714387_63053 {
    visibility: hidden;
}
</style>

26 minutes ago, tuanphan said:

#1. You mean, you want when users click Header button >> Open GG Calendar Lightbox?

I see click Footer button > It open GG Lightbox here

Hi @tuanphan 🙂 Yes when you tested it, it had the actual GG Calendar link there, sorry about that. I've now changed the link again to "#google-scheduler" instead of the GG URL, and nothing happens when I click on it. Just to be clear, I'm attaching a screenshot of the button I'm referring to, the one at the top-right corner.

Regarding question 2, I can see the line again, many thanks!!

With header button, change this ID

to this ID

header#header a.btn

Thanks @tuanphan, that worked great! Much appreciated!

Hi @tuanphan, hope you're OK!

So, I just went live with the website and I'm noticing all the buttons throughout the homepage are opening the Google Scheduler… I had thought the buttons for which we set the URL as "#google-scheduler" were the only ones to call on the JS. Could you kindly help on this?

The live website is oneandthree.co.uk

Thanks!

If it helps @tuanphan, there's only one button on the homepage that I'd like to call on the Google Scheduler… the button's code is #block-05bd4d554ce0a8dfe638 , and it's towards the end of the page under 'Let's Collaborate'.

Thanks!

Hi @tuanphan, I actually managed to sort this out, with some help from ChatGPT 🙂 In case anyone in the future finds this thread useful, all I did differently from @tuanphan's instructions was to change the JavaScript code he had given me to the following:

<!-- Specific button on homepage to open Google Cal Scheduler in-page booking -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#block-05bd4d554ce0a8dfe638').click(function(event) {
        event.preventDefault();
        $('.code-block button').click();
    });
});
</script>

… where the text '#block-05bd4d554ce0a8dfe638' is the unique ID of the button that I wanted to call on the JavaScript code.

Hi, @tuanphan thank you work for me! - though to see it working I had to see the page logged out.

Hey @ChrisMahoney, 

I was browsing your site to check out the button and noticed a little bug that probably has to do with the work here in the thread. It seems like your schedule a meeting button in the header only works on the home page. When I try to click it while on the Work page or the Contact page it does nothing when clicked. I wish I came here with a solution to this but I'm still trying to edit my schedule button on my site 😄 good luck!

Thanks so much @mghazal, I don't believe I had this issue before! I can't quite understand what I can do to fix this… by any chance would you be able to help @tuanphan ? The site is www.oneandthree.co.uk . Thanks! 

@ChrisMahoney so I'm not sure if this will help or not but I was able to edit my button directly without adding a button from squarespace. I ended up inspecting the site and using the given class name to just apply css to it directly. All you should do is end your changes with !important  to override the pre-existing css.

example: 

.qxCTlb{
  padding: 16px 20px !important;
  border-radius: 10px !important;
}

The difference between your case and mine, is yours seems to be in the header so it may present different issues. Let me know how it goes!