Jump to content

How to add Javascript to Navigation Button (7.1)

Go to solution Solved by tazmeah,

Recommended Posts

Site URL: https://jsartistry.squarespace.com/


I'm trying to add Timely scheduling javascript (i think) to a booking button in the navigation of this website. 

Basically, I want customers to be able to book their appointment thru the timely platform within my site and i want them to access it thru the navigation button. 

Thank you 🙂

The code that Timely gave for me to embed a link to the site is below. But I'm not sure how I can relate this to the button.


<script id="timelyScript" src="//book.gettimely.com/widget/book-button-v1.5.js"></script>
<script> var bookingButton = new timelyButton('jsartistry', {"dontCreateButton":true});</script> 



<a href="https://bookings.gettimely.com/jsartistry/bb/book" onclick="return bookingButton.start();">Book now</a>
<script> bookingButton.start();</script>


website: https://jsartistry.squarespace.com/

pword: hello123

Link to comment

Hi @tazmeah, thanks for coming back to me. 

Sorry, no I should have explained it better. I want the nav button to open the booking widget within the webpage. Currently it is taking you over to the Timely website. 

I am able to do it with the buttons within the page, as I can insert a code element and put the javascript in. But for the nav button I'm still trying to figure it out, as to how to enter javascript. If that makes sense. 

See photo attached of example of how I would like it to look when you click nav button (which is what happens when you click the regular buttons for booking within the page). 

Thanks for your help 🙂

Screen Shot 2021-01-08 at 9.49.01 am.png

Link to comment
  • Solution

If you can add a Code Block to the page somewhere beneath your code from above, or inject code into the footer of the page, then this script should work for you.

document.querySelector(".header-actions-action--cta").addEventListener("click", function(e){
  (new timelyButton('jsartistry', {"dontCreateButton":true})).start();


Link to comment

Hi, Anna. It doesn't look to me like it's designed to pop-up on a mobile device. Neither the top nav nor the footer nav Book Now buttons behave that way. The code above says, "When the Book Now button is clicked on, execute the code that makes a pop-up." If I just try the code that says "execute the code that makes a pop-up" while in mobile, it navigates away from your homepage. I'm not saying it cannot be done, just that I don't see an easy way to do it.

Edited by tazmeah
Link to comment

I used to help a member a few months ago. Our way is to use Lightbox Plugin (Create a new page on Not Linked, insert Timely code). Then insert the lightbox url on the button in Navigation, click navigation, the lightbox page will open.

It works well on Mobile.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
3 minutes ago, AnnaOS said:

The client is actually happy enough for it to link to the Timely site on mobile.

In all honesty, I think that the full Timely page is the better solution on mobile devices, due to the limited space available.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

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

Hire a Designer

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