How to Add Appointment Scheduling Sessions to Your Website with Elementor Pro

Utilizing Elementor Pro's integration with Google Business Suite's "Appointment Scheduler" feature, visitors can schedule appointments on the website without the need for any other plug-ins!

Streamline Business Scheduling with the Latest Features of Elementor Pro and Google

Google recently launched a new feature, Appointment Scheduling, tailored for Google Business Suite users, designed to streamline the appointment process. The feature allows businesses and service providers to create customized appointment slots, providing a dynamic and user-friendly experience for businesses and customers. With Elementor Pro, scheduling options can be seamlessly added to a website.

Dynamic Scheduling Solutions

Clients can be provided with the flexibility to book appointments depending on the nature and duration of the service they require. Whether it's a 45-minute consultation or a 1.5-hour session. With Google's new feature and Elementor Pro, clients can be shown available slots based on duration, streamlining the appointment scheduling process and improving the visitor experience.

Almost any appointment-based business can use this feature to improve operational efficiency and customer satisfaction. Here are a few examples of businesses that could benefit from streamlining the appointment process:

• Healthcare services: from doctor's offices to specialty medical services, healthcare providers.
• Health and fitness: personal trainers, yoga studios and nutritionists.
• Professional services: legal, financial and consulting services.
• Education and counseling services: interdisciplinary tutors and mentors.
• Pet services: veterinary clinic, grooming services and boarding facilities.
• Recreation and entertainment: businesses that offer activities such as golf, rock climbing, private tours or party rooms.
• And many others.

How does it work? 

First, determine how much time to set aside for each appointment. Take a pet grooming business for example. Pets vary greatly in size and coat type, which affects the amount of time needed for pet grooming services. Once the time for each appointment type has been determined, a process can be set up on the website so that visitors can book the most appropriate time slot. This will avoid incorrect appointments and increase customer satisfaction.

Let's start working on an appointment schedule.

Step 1: Create an Appointment Schedule in Google Calendar

1. Click the "Create" button in Google Calendar to see scheduling options.
2. Write down the title, select the length of the appointment and the date on which you can set the appointment, and then follow the further instructions in the Google Calendar. 
3. Repeat these steps for each appointment type you want to offer, as shown in the pet grooming example above.  
4. All available booking slots are now displayed in the calendar.
5. Click on one to display or share your appointment page. Share your appointment schedule individually or as a group, and your visitors can choose the type of appointment

Step 2: Design the Appointment Schedule Process in Elementor Pro

There are many ways to get visitors to schedule an appointment. One way is to invite them to schedule an appointment immediately via a button in the header section. The "Book Now" button in the header ensures immediate engagement, maximum visibility and accessibility, making it easy for users to find and use the booking feature at any time during their visit to the site. The header can be designed in any way you like using the theme builder and displayed throughout the site.

Another way to do this is to place a "Book Now" button in the first section of the homepage, which Elementor officially calls the "Hero Section." The hero section is a prime location on your website and offers the perfect opportunity to make a strong first impression. This high-value space can be utilized to fully capture a visitor's attention using impactful visuals and large, eye-catching headlines. A rich library of templates can be accessed for inspiration, or make sure to use a high-converting hero section layout.

Last but not least, adding a CTA to the pricing area is a great complementary way to place it in the header and hero sections.Elementor Pro's Price List widget is a very versatile widget that allows to list the details of the service, the price, and many more details. It is highly configurable and its call to action button has all the functionality of a button widget. This works best when offering different services and wanting visitors to see the differences between those services.

Step 3: Add Google's appointment scheduling feature to your website

Once you've determined the best way to start the booking appointment user process, you're ready to go.

1. Select an appointment from the calendar and click Share. Select the "Site Embedded" option and all appointment schedules. Finally, expand the Embedded Booking Page option and copy the code provided.

2. Return to the website, create a new popup window and name it. Its width should be around 90%.

3. Add the HTML section to the pop-up window and paste the code you copied from the calendar. Save and close.

4. Go to the "Book Now" call to action button previously created on the website.

5. Click the Dynamic tab icon next to the Button Link field. Select "Popup Window" and type in the name of the popup window you want to open. This completes the process.

Opening the calendar as a pop-up window allows visitors to complete actions without leaving the site. This is always a recommended user flow that reduces bounce rates and focuses attention on the site and services.

If you want to keep each appointment separate, you can take the following steps:

1. On the calendar's appointment schedule, select "Share" and this time select "Single Booking Page".

2. Copy the code provided under the "Inline Booking Page" option,

3. Then paste the code into the HTML widget in the pop-up window you created on the Elementor website.Different pop-up windows need to be set up for different types of appointments.

4. A separate pop-up window can then be assigned to each price list widget's button, providing more detailed information about the service.

By creating separate processes for different services, organizations can meet the specific needs of their customers and ensure a smooth and efficient booking experience.

Create call-to-action buttons that actually collect payments and schedule appointments

It can be taken a step further by asking for an upfront payment to secure the client's appointment and get them to schedule an appointment with you. This will reduce the no-show rate and make up time when this happens.

The Stripe or PayPal button in Elementor Pro provides a Redirect on Success field that gives you the opportunity to paste in a direct link to the appointment schedule, create a separate page to embed the schedule, or open a pop-up window to display the embedded schedule.

This is done as follows:

1. Add the stripe/paypal button and style it. Styles can be copied and pasted from the regular buttons on the site.

2. Connect your account to the preferred payment gateway service.

3. Go to the Additional Options tab on the Stripe/Paypal widget and find the Redirect on Success link field.

4. Use dynamic tags to link to appointment scheduling pages or pop-ups created using the above methods.

Utilize external links: 

Google offers a convenient feature to copy specific links that will lead directly to a page that lists all of the appointment schedules. Not only can visitors select the time they want from this overview page, but they can also click directly on the individual links for each schedule in order to quickly jump to the service detail page they are interested in.

These links are very flexible and can be easily pasted into buttons, text or any link bar on the site as deemed appropriate. However, while this method can quickly direct visitors to the page they want to serve, it is important to note that if used too often or inappropriately, it can increase a site's bounce rate, the percentage of visitors who leave immediately after entering a page.

Therefore, when utilizing these links, make sure they match your website content and user experience to maximize visitor satisfaction and engagement.