How to add Javascript to Navigation Button (7.1)

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

Heya,

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.

HEADER:

<script id="timelyScript" src="//book.gettimely.com/widget/book-button-v1.5.js"></script>

<script> var bookingButton = new timelyButton('jsartistry', {"dontCreateButton":true});</script> 

---

HTML FOR PAGE:

<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

@tuanphan this is the one I was wondering about if you have any suggestions...

Hello, Anna. Have you solved this? I'm on your site now and I'm seeing the header script on your page, and the booking popup appear  when I click the button.

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 🙂

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.

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

@tazmeahYES!!! that worked perfect. Thanks a mill!! 🙂

Hi @tazmeah, I just realised it's not working on mobile...any suggestions? 

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.

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.

Hi @tazmeah + @tuanphan ok thanks  so much for the suggestions and help! The client is actually happy enough for it to link to the Timely site on mobile - phew 🙂

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.

@paul2009 ye probably! Thanks 🙂