Opening a Zenchef widget with a button - Help

Hi 

https://toucan-flamingo-cs8n.squarespace.com/

Website password is 'massa' ; without the quotation marks.

I have implemented the Zenchef widget on my site on the bottom right corner. Works great. 

What i would like to do is the open the widget when you click on the button 'reserveer' on the website.

Below is what can be found on the zenchef website about this. 

However i can't figure out how make it work within squarespace.

Any help is appreciated.

If you want to open the booking widget through a custom button on your website, follow this steps:

→ To trigger an action on the SDK when a user click on a element for example, simply add a data-zc-action attribute to the element.
List of events :
open : Open the reservation widget
close : Close the reservation widget

Example:

<button data-zc-action="open">Open widget</button>
<button data-zc-action="close">Close widget</button>

@Jonathan__ Can you please share the website URL?

https://toucan-flamingo-cs8n.squarespace.com/

Password = massa

@Lesum Thank you! 

I assume this won't work for the navigation bar? But that's okay, i will delete that button over there.

Also to style this custom button would i do it in the code block, or in the custom css section?

@Jonathan__ This will work for the nav bar. However, it will require some additional custom code. Add the following under Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
$('.header-actions-action--cta a').attr('data-zc-action', 'open');
});
</script>

You can style the button in the custom CSS section. If you want to add CSS code inside the code block, you have to add it within a <style> </style> block.

Thank you once again! I appreciate it!

@Lesum can i ask you one more question, so i added that button. But it is not aligned horizontally compared to the code block it is in. How would i do that?