Jump to content

Opening a Zenchef widget with a button - Help

Go to solution Solved by Lesum,

Recommended Posts

Posted (edited)

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>
Edited by Jonathan__
typo
Link to comment
  • Replies 7
  • Views 237
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

@Jonathan__ Squarespace button won't function with the widget. You need to create a button using a code block. To do this, go to the section where you want to add the button, then select "Add Block" > "Code" and insert the following code snippet:

<button class ="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-zc-action="open">Reserveer</button>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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?

Link to comment

@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.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? 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.