Introduction

There are many different ways to display your booking calendars on your site. You can use shortcodes or modules from your page builders. Below we’ll outline all the methods to display the calendar on your site.

Having Trouble With The Shortcodes?

Some page builders may process strings of text differently than others, for example, they may not be able to process missing quotes or apostrophes within shortcodes. If you’re having trouble displaying the calendars with the shortcodes, you may want to try listing the attribute values with quotation marks instead.

Instead of:

• [ssa_booking type=my-appointment-type]
• [ssa_booking type='my-appointment-type']

Try:

• [ssa_booking type="my-appointment-type"]

The difference is very subtle, but in some cases like King Composer, it’s the only way to display the calendars!

How to Add a Shortcode to a Page or Post

To add a shortcode to your website all you have to do is add it to a page or post just like you would with any other text. You can copy the shortcodes from this page and paste them back into your page editor using a text or paragraph block or module.

Display All Your Booking Calendars with the Default Shortcode

The Booking Calendar can be embedded in any post or page using our general shortcode.

Use a plain text block or shortcode block or widget to embed the Booking Calendar with the following shortcode:

[ssa_booking]

How the Booking Calendars Looks on Your Site

By default, the [ssa_booking] shortcode displays a list of Appointment Types (if you have more than one) for your customers to choose from.

Use the Reorder button in the SSA Appointment Types page to organize by dragging and dropping elements in the list. The way they’re ordered is how they’re displayed to your visitors.

Display a Specific Booking Calendar with a Shortcode

To limit the Booking Calendar to one specific Appointment Type – go to the bottom of the Appointment Type Settings and copy the shortcode with the slug included.

The shortcode should look something like this:

[ssa_booking type=the-slug-for-this-appointment-type]

The slug is created automatically after you finish creating your Appointment Type. This is displayed under the Basics tab in your setting. If you want to change the slug, it can’t have blank spaces, words must be separated by a hyphen (-).

If you have the Booking Calendar for an Appointment Type already displayed on your site and you change the slug, you would have to make sure to change the shortcode on the corresponding pages to match the same slug.

How the Single Booking Calendar Looks On Your Site

Unlike the general shortcode, this doesn’t show a button before someone can see the date selection screen. The end-user automatically sees the calendar to select a date.

Display a Subset of Booking Calendars

To list out a subset of your booking calendars, you can use the types attribute to choose which ones are displayed. The types attribute uses the slugs for each appointment type.

So for example, if your appointment type slugs are –

• slug-1
• slug-2
• slug-3

You can use the shortcode like this to only list out the slug-1 and slug-3 appointment types:

[ssa_booking types='slug-1,slug-3']

Make sure that there are no spaces within the quotation marks. Doing something like this, “slug-1, slug-2, slug-3”, won’t work since there are spaces between the commas and slug names.

Display Using Page Builders and the Appointments Module

If you’re using one of the page builders listed below, you could also use our Appointments block/widget.

• Classic WordPress editor
• WordPress Block Editor
• Elementor
• Beaver Builder
• Divi
• Visual Composer

Display the Booking Calendar in a Different Language

The default shortcode displays the Booking Calendar in your site’s default language.

However, you can override your site’s default language by using the following shortcode format:

[ssa_booking ssa_locale="language_Code_Here"]

Where you’ll need to replace language_code_here with the code for your language pack.

See the complete list of languages with their corresponding code here. Notice the language code highlighted in yellow underneath each language description:

For example, to display your booking calendar in formal German, the shortcode looks like this:

[ssa_booking ssa_locale="de_DE_formal"]

Your language must be in our language pack list, if not you’ll need to contribute translations to your language pack. Here’s a guide on how to Translate your Booking Calendar.

Display the Booking Calendars with an Availability Limit

The default shortcode will display available bookings starting from the current date and ending on a date determined by either the Advance or Availability Window settings. But if you’d like your calendars to follow a custom start and end date, you can do so with these shortcode:

Start Date

 [ssa_booking availability_start_date=2022-04-25]

End Date

 [ssa_booking availability_end_date=2022-04-30]

Both Start and End Date

[ssa_booking availability_end_date=2022-04-30 availability_start_date=2022-04-25]

Display the Admin Dashboard on your website

Place the Simply Schedule Appointments Administrator dashboard on your website using this shortcode in a text block or shortcode block:

[ssa_admin]

Now you can make changes to your appointments and SSA settings without having to navigate through the WordPress dashboard.

Check out our guide for more tips on the Admin Dashboard.

Display the Booking Calendar using The Events Calendar integration

If you’re using The Events Calendar and want to display your event appointment type from SSA, use this shortcode:

[tec_ssa_booking]

If you haven’t yet set up your Event and Appointment type, take a look at our guide on Setting up The Events Calendar.

Related Guides

• Upcoming Appointments Module

• 

  General Settings

• 

  Styling the Booking Calendar

• 

  Appointment Type Settings