How to Implement Calendr for a Simple Yet Powerful Booking Solution for MyListing

Build Better MyListing Websites. One Guide at a Time.

Table of Contents

Overview

Guide Updated: 10/13/2021

Our How to Implement Calendr for a Simple Yet Powerful Booking Solution for MyListing guide will show you how to implement this solution as an alternative to Calendly.

Imagine having the premium features of Calendly, for FREE, including the ability to take payments, sync calendars, etc. for not only you but also all of your Listing customers.

Before you say “I only want an integrated MyListing solution.”, you may want to think about that a bit more. 😉

We get it. Our clients get it. Pretty much everyone involved with building MyListing websites gets it. We at least want the option of a booking solution that is tightly integrated with the MyListing theme.

Until that happens, we feel it is our job to help the MyListing community find alternatives, that in some cases, might be what you were looking for all along.

There are upsides to not having solutions tightly integrated with a WordPress theme.

Benefits of Non-Integrated Solutions

Decreased Theme Weight and Complexity

An argument could be made that theme developers should focus on making the core aspects of their theme as solid as possible, free of design/functionality flaws, optimized code for performance, etc.

The more bells and whistles you add to a theme, the “heavier” it becomes, the more complicated it becomes, and the more the developers will be bogged down with support questions.

Less Performance Overhead

The heavy lifting is done on the infrastructure of the solution provider, rather than on your own servers.

Make no mistake, WooCommerce and Elementor websites alone are very “heavy” and server process intensive. Add on top of that a theme that has some really big features  (i.e. arguably that should be a plugin or SaaS instead) built in, you are looking at needing the best WordPress hosting that’s available.

Greater Agility

This comes about when your business doesn’t have a huge reliance on any one solution (theme, plugin, etc.) for it to function, which in this case would be the theme.

What happens if the theme developers just decide they are calling it quits? How much would you need to scramble to bring all the functionality back that your customers are accustomed to having?

Fewer Responsibilities and Customer Control

Using 3rd party solutions provides you with less responsibility as the website owner, as support is placed primarily in the hands of the solution provider, and your customers have complete control over their accounts.

The alternative is that you are the middleman, sitting between the theme developers and your customers, where you will be responsible for supporting potentially thousands of customers that may experience a myriad of issues with the booking solution. Is your business equipped to provide adequate support in terms of the time commitment and infrastructure? Do you even want to be in the support game?

Calendr vs. Calendly

Pros

Here are just some of the pros of going with Calendr.

  • Calendr provides all of its premium plan features for FREE, for up to 10 bookings per month.
  • Calendr has a good amount of Calendly’s paid features (arguably the most important ones for MyListing directories) for FREE.
    • Unlimited Event Types (Calendly only allows 1)
    • Unlimited Calendar Connections (Calendly only allows 1)
    • Scheduling Pages
    • Embedding with Color/Branding Customization
    • Stripe Integration (i.e. Payments can be taken right from the form.)
    • Zoom Integration
    • Google (Calendar/Meet) Integration
    • Microsoft 365 (365/Teams) Integration
  • Ability to design your embed form and even use ‘Dark Mode’.
  • The team behind Calendr is small, motivated, and has the agility to be flexible with customers, whereas Calendly is seemingly the exact opposite.

Cons

  • Calendr is a newcomer, whereas Calendly is an established company. (Note: Like your directory, everyone has to start somewhere, so while we list this as a downside, it’s doesn’t mean that’s necessarily the case.).
  • Calendly has more integrations than Calendr. (Note: See our previous comment about being a newcomer and to be fair, you have to sign up for the more expensive Calendly plans to get access to most integrations.).

Calendr Setup

  1. Sign Up for Calendr.
  2. Fill in your profile information. (Note: For crispness and to not cut off the subject matter of your profile photo, please use an image that is 160 x 160 px and has the subject matter as centered as possible.).
  3. Click ‘Next’ to proceed to the ‘Integrations’ portion of the setup.

Integrations

As outlined above, Calendr provides some nice integrations and we will cover those here.

Google (Calendar / Meet)

  1. Click on the ‘+’ button under ‘Integrations’.
  2. Choose ‘Google (Calendar / Meet)’.
  3. Sign in with the desired Google account.
  4. Click ‘Allow’ to give Calendr the permissions it needs.

Microsoft (365 / Teams)

  1. Click on the ‘+’ button under ‘Integrations’.
  2. Choose ‘Microsoft (365 / Teams)’.
  3. Sign in with the desired Microsoft account. (Note: If the account you are using for Calendr is not an admin-level Microsoft 365 account, you will also be prompted to sign in with an admin-level account.).
  4. If prompted (see the previous step), click the link to sign in with an admin-level account, enter those credentials, and choose to grant the necessary permissions for Calendr.
  5. Click ‘Allow’ to give Calendr the permissions it needs.

Stripe

Before you begin this section, you need to have a Stripe (Free) account set up a verified.

  1. Click on the ‘+’ button under ‘Integrations’.
  2. Choose ‘Stripe’.
  1. Authenticate with your Stripe account.
  2. Select an existing Stripe sub-account or create a new account. (Note: For this guide, we are creating a new sub-account, and this is because Stripe may, in the near future, require new sub-accounts to be created on a per solution basis, rather than using a sub-account with multiple solutions.).
  3. Select an existing Stripe sub-account to copy your legal information from or start anew. (Note: For this guide, we are copying over our existing legal information from another account.).
  4. Click ‘Next’.
  5. Enter your new business details and click ‘Submit’.

Zoom

  1. Click on the ‘+’ button under ‘Integrations’.
  2. Choose ‘Zoom’.
  3. Sign in with your Zoom account.
  4. Click the  ‘Pre-approve’ button.
  5. Click the ‘Authorize’ button.

Sync

As mentioned above, Calendr provides unlimited calendar connections and if you were to utilize multiple calendar connections, the Sync settings are where you would specify which calendar has precedence.

  • Specify the calendar(s) that you want to absolutely avoid double-booking in.
  • Configure the primary calendar for syncing booking entries into.

Availability

This is where you will let people know when you are available for booking and you have the option to choose between a simple configuration or a more complex configuration.

Booking Page

At the bottom of the ‘Availability’ setup, you’ll notice a ‘Make Your First Booking Page!’ button, and clicking on that button brings up the Booking Page Editor.

Booking Page

  1. Event Details > Enter your desired information. (Note: In the right-hand panel you can see how your booking page will look once published.).
  2. Payments > If you want to charge for the bookings, choose the Stripe account that you set up using this guide, set your desired currency, and enter your payment terms. (Note: If you are going to charge for bookings, we recommend including a link to your Terms & Conditions policies as part of your payment terms.).
  3. Event Duration > Set the maximum number of minutes the event can last and enter your fee amount. (Note: Additional durations can be added and unique pricing can be applied to each of them.).
  4. Location Settings > Set the location for the event.
  5. Event Hosts > Leave as-is for now and optionally circle back later to update your booking page if you decide to set up an organization where you work with other team members.
  6. Location > Choose the integration you would like to use to conduct the meeting or use the ‘Custom’ option. (Note: For the purposes of this guide, we are using the ‘Custom’ option with some text to say that meeting information will be shared over email after the booking is submitted.).
  7. Availability > Use the default or specify a custom availability for the meeting.
  8. Booking Options > Meeting available every > Set the max number of bookings you are willing to allow per hour.
  9. Booking Options > Minimum notice > Set the minimum amount of notice you need before you can be booked. (Note: To avoid any last-minute bookings, you can set a minimum notice period. This will ensure that if, for example, we are at 13:00 on a Tuesday afternoon, and you have set the minimum notice period to 2 hours, then the earliest time slot that a Guest can book with you will be 15:00.).
  10. Booking Options > When can events be scheduled? > Set your desired period of time to allow bookings.
  11. Guest Questions > Add any additional questions you would like to ask the guest.
  12. Email Notifications > Chose your desired reminder interval and optionally provide additional reminder intervals.
  13. Shareable Link > Leave the link as-is or specify a custom link that you can share with others.
  14. Click ‘Save & Exit’.

At this point, you will be presented with some optional steps to ramp up your bookings.

  • Book meetings straight from LinkedIn by copying your unique link to your profile page. Click to open LinkedIn.
  • Tell your LinkedIn connections that you’re now open for meetings & appointments, by posting to LinkedIn.
  • Add your unique booking link to your email signature. (Note: Clicking on the link Calendr provides, they will give you email signature options with your booking information automatically injected.).
  • Maximize traffic conversions by embedding your event on your website, with the provided link.

Event Management

Visting your Calendr dashboard gives you the option to do a number of things related to events.

Note: You can also get to your dashboard by clicking on the Calendr icon in the header.

  • View the events as visitors would see them on the front end
  • Copy your unique event links
  • Edit your Booking Pages
  • Add new events
  • Generate and copy email signatures
  • Grab your embed code
  • Design your embedded form
  • Delete an event

Design Your Embedded Form

We are proud to say that our work with the Calendr team and our mockup of more of ‘Dark Mode’ look to accommodate our Starter Site 4 (‘Basecamp’), has influenced a bit more flexibility when it comes to design choices.

  1. Visit your Calendr dashboard.
  2. Click the three dots next to your event and choose ‘Embed’.
  1. Click on the color swatch to enter a color the matches your own branding or just copy your embed code as-is and replace the default color hex code with your own.
  2. Dark Mode > Click on the ‘Dark Mode’ checkbox to quickly see how this would look and then make a decision about which look you prefer.

Once you have your embed looking just the way you would like in your preview screen, copy the embed code and drop it onto your website.

MyListing Implementation

Embedding booking forms within Single Listings is super simple and we will cover those steps here.

Listing Type Configuration

  1. Listing Type > Fields.
  2. Add a custom Form Heading with a label of ‘Booking’. (Note: We recommend doing this to create a Booking section stands alone and is more prominent.).
  3. Form Heading > Enable Package Visibility > If you want to include the Booking feature only for certain packages.
  4. Add a custom Text Field with a label of  ‘Booking Form’.
  5. Placeholder > Copy the provided placeholder text below and paste it into the placeholder area for the field.
				
					https://meeting.calendr.it//THIS_IS_YOUR_EVENT_NAME#
				
			
  1. Text Field > Enable Package Visibility > If you want to include the Booking feature only for certain packages.
  2. Description > Copy the provided description text below and paste it into the description area for the field.
				
					If you would like to add a booking form to your Listing, you can sign up for a <strong><a href="https://calendr.it" target="_blank" rel="nofollow"> Calendr account</a></strong> (no credit card required), which allows you to schedule up to 10 bookings per month for FREE. Once you have your Calendr 'Event' set up, follow these simple steps to add your form to your Listing.<br><br>1. Within your <strong><a href="https://calendr.it" target="_blank" rel="nofollow"> Calendr account</a></strong>, click the three vertical dots on your 'Event' card.<br>2. Choose 'Embed'.<br>3. In the field below, add only the name of your 'Event' (i.e. what's shown after 'calendr.it//' and before '#', and we will do the rest.
				
			
  1. Listing Type > Single Page > Content & Tabs.
  2. Within an existing tab or within a new tab, add a shortcode block with a label of ‘Booking’.
  3. Shortcode > Copy the provided shortcode text below and paste it into the content area of the shortcode. (Note: You can easily adjust the accent color within the Calendr dashboard or by simply editing your shortcode on your website and replacing the current HEX Color value with perhaps a value that matches your branding.).

Example: Calendr default styling with purple accent color.

				
					<iframe width="800" height="800" class="perfmatters-lazy" data-src="https://meeting.calendr.it//[[booking-form]]#color=#87136e"></iframe><noscript><iframe width=800 height=800 src="https://meeting.calendr.it//[[booking-form]]#color=#87136e"></iframe></noscript>
				
			

Example: Calendr default styling with purple accent color and 'Dark Mode'.

At this point, any time a Listing owner adds their Calendr ‘Event’ name to their Listing, their booking form for that ‘Event’ will show up.

				
					<iframe width="800" height="800" class="perfmatters-lazy" data-src="https://meeting.calendr.it//[[booking-form]]?darkmode=true#color=#87136e"></iframe><noscript><iframe width=800 height=800 src="https://meeting.calendr.it//[[booking-form]]?darkmode=true#color=#87136e"></iframe></noscript>
				
			

Wrap Up

Congrats! If you have made it this far, you are well on your way to adding a huge value add to your Listing customers. 

Your MyListing website is now capable of possibly eliminating a monthly bill for your customers, which not only makes them want to sign up to list on your site, but it also keeps your existing customers hooked on your directory.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)