Back to Booking Forms Guides

Elementor Module

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

If you have both Simply Schedule Appointments and the Elementor Page Editor installed, when you’re editing a page with the WordPress Block Editor, you’ll see two modules to choose from: 

  • Schedule an Appointment and 
  • Upcoming Appointments.

To use Simply Schedule Appointments with Elementor, go through The Setup Wizard in SSA.

Screenshot depicting where to locate the SSA Modules in Elementor's widget area.

Using the Schedule an Appointment Module

This module displays your booking form and lets your users book an appointment:

Content

Under the Content header, you are presented with several options for modifying your booking calendar presentation. 

Schedule an Appointment Module embedded via Elementor, presenting several options for customizing to your liking.

Select Appointment Types

You can choose to filter by Appointment Types or Labels. 

A dropdown depicting Appointment Types or Labels that user can select to display.

Appointment Types

To display certain Appointment Types, click the little + icon, which will prompt a dropdown presenting all the appointment types in the booking calendar. You can add as many appointment types as you want, giving you the flexibility to display specific ones as necessary.

Selecting which Appointment Types to display in the dropdown and adding them to the list.

Labels

If you have created labels for your appointment types, you can choose from the dropdown which group of appointment types you’d like to display. 

Filtering the Appointment Types by Label groups.

Appointment Types View

You can change how the appointment types listing displays on your page, whether it be in a List view, a Grid view, or a Two-Column View. 

Appointment Types view dropdown menu depicting a List, Grid, and Two columns option.

Booking Flow

Just like you can change the Booking Flow of the appointment type in its settings, you can adjust it from here as well. You’re able to change the Main Booking layout to use the default settings, or adjust it to use:

  • Expanded
  • Express
  • First Available
Choosing the Main Booking Layout from the Elementor Module.

Expanded Booking Flow

The Expanded Booking Flow shows the Date Selection screen along with the Time Selection screen before reaching the final customer information screen in the booking form process. 

You are presented with a View Type button that allows you to switch between a Date View and Time View. 

This lets you adjust the Date View to weekly, monthly, or only available dates. The Time View allows you to switch between the Time of Day columns or a Single Column.

Expanded Main Booking Flow depicting View Type and Date View options.

Express Booking Flow

The Express Booking Flow consists of a single view containing the Date and Time selection all on the same view before reaching the customer information screen.

The Time View dropdown allows you to switch between the Time of Day columns or a Single Column.

Express Booking Flow layout depicting the Time View option.

First Available Booking Flow

The First Available Booking Flow begins by prompting the user to choose from the first available time slot within the pre-selected duration. 

You can enter your duration and the duration unit from the dropdown. You can also provide your fallback flow here in case there are no time slots within the pre-selected duration or if the user decides to choose a different time slot. 

First Available Booking Flow depicting the duration, duration unit, fallback flow, view type, and date view options in the Elementor Module.

Style

Under the Style tab, you can adjust the Accent Color, Background Color, Font Family, and Padding of the Appointments widget:

Choosing the Booking Calendar Style Options in Elementor

Advanced

Under the Advanced tab, you can adjust several advanced design attributes of the widget, such as custom margins and padding, borders, mobile responsiveness, and Custom CSS:

The Advanced options for the Booking Calendar in Elementor

Using the Upcoming Appointments Module

This module will show the logged-in user any appointments they’ve booked.

Content

Within the Content of the Upcoming Appointments module, you are presented with several options to customize this to your liking. 

Upcoming Appointments Elementor Module displaying several options about Appointment Types, Resources, and Team Members.

As a result, the Upcoming Appointments module can look pretty nifty.

Upcoming Appointments Module displaying booked appointments, with all options toggled on.

Display Information

You can toggle information about Appointment Types on so that users can see which Appointment Types they have booked for their appointment.

Display Information about the Appointment Types toggle.

Display Resources

If you have the Resources feature enabled and assigned to appointment types, you can toggle this information to display information about all resources or only specific resources.

Choosing to display specific Resources on the Upcoming Appointments module.

Display Team Member Information

If the Team booking feature is enabled and team members are assigned to an appointment type, you can choose to show which team members are assigned to the appointments. And, if they have a team member image set, this can be displayed as well. 

Displaying the Team Member Name and Images in the Upcoming Appointments module.

Advanced

Under the “Advanced” tab, you can adjust several advanced design attributes of the widget, such as custom margins and padding, borders, mobile responsiveness, and Custom CSS:

Screenshot depicting how to adjust the advanced design attributes of the widget.
Adjust the upcoming appointments widget with the Advanced settings

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides