Google Calendar Pop-Up on Exisiting Header Button

Looking to add the below Google calendar pop-up to the "Book A Free Call" button in our header and "Stop Noodlin'" section.

It's currently a TypeForm pop-up, but looking to make the switch.

Website -> https://www.madebyapricot.com/

Code:
Google Calendar "Button With Pop Up"

<!-- 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/AcZssZ0pwSCOMh-CIFof5UzIT1yklZ5xgUBnUuZegMvNeTHKQ4bK77LjPlL6MAGx1spP7iDdPZKmwAOV?gv=true',
      color: '#039BE5',
      label: 'Book an appointment',
      target,
    });
  });
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->

#0. Make sure header button, option "Open in New Tab" is disabled

#1. First, add your Google Calendar to Website Tools > Code Injection > Footer

#2. Use this code to Website Tools > Custom CSS

button.qxCTlb {
    position: fixed;
    opacity: 0;
    transform: translateX(-1000px);
}

#3. Use this code under #1 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', 'header#header a.btn', function(event) { 
    event.preventDefault(); 
    $('button.qxCTlb').click(); 
});
</script>

#4. Result

Perfect @tuanphan. How can I add the same thing to the button in the "Stop Noodlin', Start Doolin'" section at the bottom?

I have followed your codes based on this chat above, but on the home page and the header throughout the website, the close button on the google calendar pop up won't work. It works on the pop ups when you scroll to a different button lower on the page (except the home page). This is the only piece I need to figure out to help make this happen for a website. Can you help me out @tuanphan?

On 7/12/2024 at 9:56 PM, Roman1222 said:

I have followed your codes based on this chat above, but on the home page and the header throughout the website, the close button on the google calendar pop up won't work. It works on the pop ups when you scroll to a different button lower on the page (except the home page). This is the only piece I need to figure out to help make this happen for a website. Can you help me out @tuanphan?

Can you share site url? We can check easier

https://ladybug-elk-w8ck.squarespace.com/

Password: C0d3n0w

On 7/16/2024 at 1:45 AM, Roman1222 said:

https://ladybug-elk-w8ck.squarespace.com/

Password: C0d3n0w

 

You can remove this code, I will test code again easier. I check the forum every 2-3 days so answers may be a bit delayed.

I deleted the code and I'm still having a problem with the close button not working on the home page. The header button goes to a black page with written code instead of showing the calendar. Let me know what you can do when you get the time. Thanks for the update on response time. I appreciate it.

On 7/19/2024 at 10:28 PM, Roman1222 said:

I deleted the code and I'm still having a problem with the close button not working on the home page. The header button goes to a black page with written code instead of showing the calendar. Let me know what you can do when you get the time. Thanks for the update on response time. I appreciate it.

Have you disabled option "Open in New Tab" yet?

Yes I have.

I see you added new code. If you have any other problems with old code, just comment below.