Jump to content

ChrisMahoney

Member
 View Profile  See their activity

  • Posts

    19

  • Joined

  • Last visited

ChrisMahoney's Achievements

Level 4

Level 4 (4/20)

  • Circle Community Advocate Rare

Recent Badges

8

Reputation

  1.    tuanphan reacted to a post in a topic: Google Scheduler Button CSS Customisation
  2. ChrisMahoney
    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.
  3. ChrisMahoney
    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!
  4. ChrisMahoney
    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!
  5.    tuanphan reacted to a post in a topic: Google Scheduler Button CSS Customisation
  6. ChrisMahoney
    Thanks @tuanphan, that worked great! Much appreciated!
  7. ChrisMahoney
    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!!
  8. ChrisMahoney
    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!
  9. ChrisMahoney
    That's exactly what I was after @tuanphan, thanks! Could you kindly provide me with the steps to implement this in my site?
  10. ChrisMahoney
    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 -->
  11. ChrisMahoney
    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!
  12.    tuanphan reacted to a post in a topic: Change style of button on hover for Carousel List
  13.    Ziggy reacted to a post in a topic: Gallery grid simple - stacking on mobile
  14. ChrisMahoney
    You're a star! It worked, thanks! I was placing the section id AFTER the media line, not before. Thanks again!
  15.    ChrisMahoney reacted to a post in a topic: Gallery grid simple - stacking on mobile
  16.    Ziggy reacted to a post in a topic: Gallery grid simple - stacking on mobile
  17. ChrisMahoney
    Sorry to bother you yet again @Ziggy… that custom CSS is obviously impacting all the Gallery Grids throughout the whole website. Without success, I've tried amending the code to call on that specific Gallery Grid on the homepage only, by targeting the section, which I believe is section[data-section-id="65e875d24850196fae830a48"] or even to call on the ID of that grid, which I think is id="yui_3_17_2_1_1710174060702_540" But I'm clearly screwing up 😅 Could you very kindly help please?
  18.    Ziggy reacted to a post in a topic: Gallery grid simple - stacking on mobile
  19. ChrisMahoney
    Ah yes, the !important made the whole difference!! Thanks @Ziggy!!
  20.    ChrisMahoney reacted to a post in a topic: Gallery grid simple - stacking on mobile
  21. ChrisMahoney
    Thanks so much @tuanphan! That worked great! The only thing that still bothered me was that Squarespace's default 'darkening' of the button on hover was still there, but I just added the line: opacity:1!important; at the end of the code and now it looks exactly the way I want it. Here's the code below: a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover { background-color: #f1f !important; border-color: #f1f !important; color: #000 !important; opacity:1!important; } Thanks again @tuanphan, much appreciated!
  22.    Ziggy reacted to a post in a topic: Gallery grid simple - stacking on mobile
  23. ChrisMahoney started following Gallery grid simple - stacking on mobile
  24. ChrisMahoney
    Thanks @Ziggy, however unfortunately it doesn't seem to have impacted anything. I tried going for 20vw so that any change is really noticeable, but it still looks the same. I also cleared the cache but nothing changed either.
  25. ChrisMahoney
    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!
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources