Home / Widgets

Reserve Now Widget

Taguhi

Last updated on Jan 17, 2025

The Reserve Now widget allows your customers to start booking of a table. The product-related information is generated from the Dashboard > Commerce > Products, where you can set up all the relevant details.

Adding a Reserve Now Widget

To add a Reserve Now widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open Page on the top panel and navigate to Ecommerce > Table Product page.
  3. Open the Widgets list on the left panel.
  4. Navigate to the Ecommerce > Table Product Widgets grouping on the Visual Editor Left Panel.
  5. Type the widget name in the search bar, or find it in the widget grouping.
  6. Drag the widget from the list and drop it into the Product List widget.

Configuring the Reserve Now Widget

To configure the Reserve Now widget:

  1. Go to Styles to modify the widget styling features:
  • Select the current condition of the widget from the State dropdown:
    • Normal: The default state of the button when it is not being interacted with.
    • Hover: The state of the button when the user hovers over it with the mouse cursor.
    • Focus: The state of the button when it is currently in focus or active.
    • Active: The state of the button when the user performs an action like clicking, tapping, or pressing.
    • Disabled: The state of the button when it is inactive or unavailable for interaction.
    • Selected: Active or currently selected state of the button, indicating that the user has specifically chosen or targeted it for a particular purpose.
  • Select how it behaves based on certain conditions or user interactions from the Mode dropdown:
    • Normal: The default state of the button when it is not being interacted with.
    • Loading: Indicates that it is currently processing or loading data. This often includes animations or indicators to show the loading state.
    • Out of Stock: Alerts customers that the product is unavailable and cannot be purchased until it is restocked or becomes available again, either temporarily or permanently.
    • Success: Indicates that a particular action or operation has been completed successfully. It is often used to provide positive feedback to the customer after they have taken a desired action.

Note: In the case of out-of-stock, the public mode displays the out-of-stock disabled button, which is based on the Button (see Button Widget) widget customizations. You can style each mode with different colors or symbols to signify their status.

2. Go to Content to make the necessary configuration of widget content:

  • Icon allows you to add or change the icon next to the menu item that best suits your website design. To do so:
    • Click Change Icon.
    • Go to General Icons and select the corresponding icon from the list.
    • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
  • Label allows you to modify the name of the Reserve Now item. The label provides a brief description or name for the action or feature associated with the item.

3. Go to Settings to modify the settings of the widget:

  • Select the action when the customer adds a product to the cart from the Added to Cart Action dropdown.
    • No Action
    • Open on Cart Page
    • Redirect to Cart Page
    • Start Checkout
  • Expand Visibility to modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Tip:

  • You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
  • Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
  1. Click the Dotted Menu in the right corner of the Property Panel.
  2. Select Reset Styles to discard the changes made to the widget and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Note: This update will be applied to those widgets that derive their styles from this base element.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.