Home / Widgets

Appointment Product Widgets

Taguhi

Last updated on Jan 13, 2025

The Appointment Product Widgets grouping comprises widgets related to appointments of various types, including medical, spa, dental, and so forth. The grouping includes a set of widgets specifically designed to support the scheduling and management of the appointment process.

Tip: 

  • To use the Appointment Product Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping.
  • You can access a single appointment product page from Pages > Ecommerce > Appointment Products.

Adding Appointment Product Widgets

After creating the product, you can add its related widgets.

To add the Appointment Product Widgets:

  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. Navigate to Pages > Ecommerce > Appointment Product page.
  3. Open the Widgets list on the left panel.
  4. Navigate to the Ecommerce > Appointment 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 Appointment Product Widgets

You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.

  1. Go to Styles to modify the necessary configuration of general styling features (see Global Styles). Global Styles are predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
  2. Go to Settings to modify the Visibility of the widget on your website. Specifically, 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:

  • To get more widgets in the widget list of the Visual Editor, you need to add the product-related fields from the Dashboard > Products > Fields.
  • To drop the product-related widgets within the Product List, hold down the CTRL while doing so.

Book Now

The Book Now widget is displayed on your public mode as a CTA button to prompt customers to schedule appointments. Once clicked, they are redirected to the appointment booking process, where they can select their desired date and time slot and provide any necessary information.

Once you have added the Book Now widget, you can modify its Styles, Content (Global Styles), and Settings (Visibility Settings). All the product-related information is generated from Dashboard > Products, where you set up the relevant details.

  1. Go to Styles to modify:
  • States: You can customize the styles for different states, such as Active, Disabled, or Selected. For instance, when an item is out of stock and in a disabled state, you can apply specific styles to convey this to your customers. These customized styles will be visible to the public when the product is out of stock.

2. Go to Content to modify:

  • Icon: Allows you to add or change the icon next to the 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: Edit the button text/label.

3. Go to Settings to modify:

  • Added to Cart Action - when your customer adds a product to the cart, you have the option to choose the desired action:
    • No Action
    • Open on Cart Page
    • Redirect to Cart Page

Added to Cart Action allows you to customize the behavior redirecting to the cart. You can also customize the widget-specific state styles from the Property Panel.

The following modes are available:

  • Normal: Indicates the static state of the widget, referring to the state of the widget when it is not affected by any interaction.
  • 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.

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 state with different colors or symbols to signify their status.

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 Book Now and restore its default style.
  3. Select Override Styles to apply the changes made to the Book Now widget (font, size, alignment, etc.) in order to change its default style.

You can access the UI Elements available in the Design System from the upper-right corner of the Property Panel and select one as a base for the widget or create a new UI Element and style it according to your preferences.

Buy Now

The Buy Now widget allows your customers to quickly purchase a product with a single click or interaction. It takes your customers directly to the checkout page without affecting the items stored in the Cart. The widget makes it easier for customers to make purchases or complete transactions without having to navigate through multiple pages or forms (see Buy Now Widget).

Location Link

The Location Link widget refers to a URL or link that provides the location details for the appointment. It includes information on the address and directions. The product-related information is generated from Dashboard > Products, where you set up all the relevant details.

Once you have added the Location Link widget, you can modify its Styles, Content (Global Styles), and Settings (Visibility Settings).

Slot Duration

The Slot Duration widget specifies the duration of time allocated for each appointment slot, determining the availability for a single appointment booking. For instance, if you configure the Slot as 30 minutes in Dashboard > Products, the Visual Editor will display appointments scheduled for half-hour time slots, and your customers will be allowed to book an appointment for 30 minutes.

Once you have added the Slot Duration widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

Time Slot

The Time Slot widget refers to a specific interval of time within which an appointment can be arranged. It is divided into units such as weekly, daily, and hourly. For example, if you need to work five days a week but only for half a day on weekends, the time slot is used in this scenario. So, your customers can select a preferred time slot that aligns with their availability and the slot that you have configured. All the product-related information is generated from Dashboard > Products, where you set up the relevant details.

Once you have added the Time Slot widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

Availability

The Availability widget refers to the time periods or dates during which an appointment is open for scheduling. It specifies the times when appointments can be booked based on your configured date and time availability. Public users can view the available time slots and choose a suitable one for their appointment.

All the product-related information is generated from Dashboard > Products, where you set up the relevant details.

Once you have added the Availability widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

 

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