I am building a site for a friend that requires me to include a button to the Google Appointment Calendar. I followed what Google said to do, but when I implemented it, it showed the button at the bottom of the page. I have tried everything I can think of to fix it, but no matter what I try, I can't move the button to where I want it. Below is an example of the code Google provided.

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

Dale K's user avatar

Dale K

28.3k15 gold badges62 silver badges87 bronze badges

logan k's user avatar

5

The issue is in using document.currentScript as the target, instead I recommend creating a target element, place it where you want in the page, and use it in the script:

<div id="google-calendar-button"></div>

And then pass target as follows:

target: document.getElementById('google-calendar-button')

Majed Badawi's user avatar

2 Comments

That worked. Thank you for the help on this!

2026-01-31T23:39:05.683Z+00:00

Request clarification and add context please

2026-02-01T06:22:24.093Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.