Back to Getting Started Guides

This guide applies to:

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

Introduction

Easily embed the Booking Calendar into your Elementor page using the Schedule an Appointment Module in the Elementor editor.

What You Need First

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


How to Use Simply Schedule Appointments with Elementor

If you have both Simply Schedule Appointments and Elementor installed, when you’re editing a page with Elementor, you’ll see two modules on the left hand side: Schedule an Appointment and Upcoming Appointments.

Simply drag and drop from the left menu into your page to get started:

Editing a page with the Elementor page builder

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 can choose to show All Appointment Types, or filter to only display a single Appointment Type Calendar:

Elementor-choose-appointment-type
Selecting the Appointment Type to display with Elementor

Style

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

Elementor-style-options
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:

Elementor-advanced-options
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

If there are no upcoming appointments , you can customize the message you want to show the user by editing the “Upcoming Appointments” text on the left side of the screen:

Elementor-content-options-upcoming
Customizing the message for when there’s no booked appointments

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:

Elementor-advanced-options-upcoming
Adjust the upcoming appointments widget with the Advanced settings

When you’re finished with your changes, click on the green “Publish” button to save them.


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