Jump to content

How to add Javascript to Navigation Button (7.1)

Recommended Posts

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

Link to comment
  • Replies 11
  • Views 2.1k
  • Created
  • Last Reply

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

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>

 

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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.