gAppointments


Appointment booking addon for Gravity Forms.

Installation


Make sure you already installed and activated GravityForms.

 

Step 1. Log into your WordPress Admin area.

Step 2. Look down the left hand column for “Plugins” and then click on the button “Add new”.

Step 3. In the “Add new” page, click “Upload Plugin” on top

Step 4. In the “Upload” page, click “Choose file” to browse for the theme installation file in [path-to-your-downloaded-package]/gAppointments.zip). Click “Install Now”.

Step 5. After installed successfully, click “Activate” to make the gAppointments active

Always remember to download the latest version from your Themeforest account.

UPDATE PROCESS


Step 1. Log into your WordPress Admin area.

Step 2. Disable and remove the old version of the plugin.

Step 3. Click on the button “Add new”.

Step 3. In the “Add new” page, click “Upload Plugin” on top

Step 4. In the “Upload” page, click “Choose file” to browse for the theme installation file in [path-to-your-downloaded-package] /gAppointments.zip). Click “Install Now”. (You might need to extract the codecanyon package first)

Step 5. After installed successfully, click “Activate” to make the gAppointments active

Setup


Add services

  • Step 1. Go to gAppointments > Services
  • Step 2. Click Add service on top left admin

  • Step 3. Name your service
  • Step 4. Price – Set service price without the currency symbol. If you need to change the currency, go to Forms > Settings > General Settings
  • Step 5. Available Appointment Times – Select what clients book on the calendar between “time slots” or “dates” without slots.

    Note: If you set this option to Dates, is recommended to add a provider offering this service.

  • Step 6. Duration – Set time slots duration. This step is available only if you selected “Time Slots” option.
  • Step 7. Cleanup – Set the amount of free time to leave after an appointment. This step is available only if you selected “Time Slots” option.
  • Step 8. Max capacity – Capacity is the number of customers that can take the service at the same time/date. Ex: 3 attendees for 9:00 AM, or 3 attendees for 22 January 2018 if you selected “Available Appointment Times” to “Dates”. If you set more than 1, this will popup on every time slot showing availability:

  • Step 9. Reduce Gaps – Clients can book any time directly following an appointment to avoid free gaps after booked appointments and breaks. This step is available only if you selected “Time Slots” option.
  • Step 10. Time Format – Show calendar time slots in 12 hour or 24 hour time format. This step is available only if you selected “Time Slots” option.
  • Step 11. Show End Times – Clients can view when the timeslot ends on the calendar. This step is available only if you selected “Time Slots” option.

     

  • Step 12. Remove AM/PM text – Remove am/pm text from calendar slots. This step is available only if you selected “Time Slots” option.
  • Step 13. New Appointment Lead Time – How much lead time do you require for new appointments. With a 4-hour lead time, if a client were scheduling at 8:00 am, the earliest a client would see an appointment time for the same day would be 12:00 pm. At 8:01 am, the 12:00 pm appointment time would no longer be available.
  • Step 14. Availability period – Period when appointments can be scheduled.
    Future days – Schedule appointments in the future, from today on an interval of days.
    Date range – Schedule appointments within a defined range of dates.
    Custom dates – Schedule appointments only on custom dates.
  • Step 15. Prior Days To Book Appointment – How far in the future from today can clients book appointments online. This step is available only if you selected “Future days” period.
  • Step 16. Max Bookings – How many time slots can a client book per date. This step is available only if you selected “Time Slots” option.
  • Step 17. Multiple Bookings – Enable/disable multiple slots selection.
  • Step 18. Multiple Max Selection – How many multiple slots can a client select once.
  • Step 19. Prevent Double Bookings – Block clients booking same time again. Is recommended to set this field to Yes.
  • Step 20. Create a category – Create a category for this service or select existent one, multiple categories for one service is possible. A category of services can be used into one form.
  • Step 21. After you named your category, click “Add new category” button
  • Step 22. Save service as Published

Add providers

Step 1. gAppointments > Providers

Step 2. Click Add provider on top left admin

Step 3. Add provider name

Step 4. Assign User – You can assign only one registered user per provider, if same user is assigned, this field will not be saved.

Step 5. Services – Select which services provider supports

Step 6. Calendar – If you set this as NO, the default work hours, breaks, and non working days will be used from gAppointments > Settings > Calendar. Follow next steps if you set this as YES

Step 7. Work schedule – Define week day schedule for time slots or bookable dates. If you are using for bookable dates, put any times, just don’t select “Out”

Step 8. Add Breaks – Set breaks for every day of the week. (Optional)

Step 9. Holidays – Set non working days. (Optional)

Step 10. Save provider as Published

GOOGLE CALENDAR SETTINGS

For sync pairing instructions, please contact us privately, we do not show instructions publicly.

Form setup

Make sure you already installed and activated GravityForms.

 

Step 1. Go to Forms

Step 2. Click Add new on top left admin

 

Step 3. Add form title, i called it Book

Step 4. Click on “Create Form” button

Step 5. Click on “Advanced Fields” tab

Step 6. Drag “Name” Widget to the left. (This field is optional)

Step 7. Give Field Label a name

Step 8. On Name Fields you can select any field you want to show. At least one field needs to be selected.

Step 9. Set widget as required

Step 10. Drag “Email” Widget to the left. (This field is optional)

Step 11. Give Field Label a name

Step 12. Set widget as required

Step 13. Click on widget Appereance Tab

Step 14. Select any Field Size Width

Step 15. Drag “Phone” Widget to the left and repeat step 11, step 12, step 13, step 14. (This field is optional)

NOTE: If your form is using multiple advanced fields of the same type (Multiple name fields, multiple email fields, multiple phone fields) You will need to specify which field should being used to fill out user data for appointment. You can do that by adding a custom css class ga-field in “Custom CSS Class” field.

Step 16. Click on “Appointment Booking” tab

Step 17. Drag “Booking Services” Widget to the left.

Step 18. Give Field Label a name

Step 19. Set widget as required

Step 20. Click on widget Appereance Tab

Step 21. Select any Field Size Width

Step 22. Drag “Booking Providers” Widget to the left and repeat step 18, step 19, step 20, step 21. (This field is optional)

Step 23. Drag “Booking Calendar” Widget to the left and repeat step 18, step 19, step 20, step 21.

Step 24. Drag “Booking Cost” Widget to the left and give Field Label a name. (This field is optional)

Step 25. Click on “Pricing Fields” Tab.

Step 26. Drag “Total” Widget to the left.

Step 27. Give Field Label a name.

Step 28. Update Form.

SELECT WHICH CATEGORY OF SERVICES TO USE FOR FORM

Step 1. Hover over Settings

Step 2. Click on gAppointments

Step 3. Select a category of services for form, or you can leave it to All services

Step 4. Click on “Update form settings” button

SETUP A PAYPAL FEED TO RECEIVE PAYMENTS

!IMPORTANT: If you don’t want clients to pay for appointments, simply remove “Booking Cost”, “Total” widgets, and don’t setup the paypal feed.

If you have installed and activated Gravity Forms PayPal Standard Add-On follow these steps:

Step 1. Hover over Settings

Step 2. Click on Paypal

Step 3. Click Add new to add new paypal feed

Step 4. Set feed name

Step 5. Set your paypal email

Step 6. Set Mode to Production

Step 7. Set Transaction Type to Products and Services

Step 8. Set Payment Amount to Form Total

Step 9. Click on “Update Settings” button

SETUP PAYPAL IPN

Step 1. Go to Forms

Step 2. Go to Settings

Step 3. Click on “PayPal” tab

Step 4. Read and follow the steps to confirm IPN is enabled.

Step 5. Check “Confirm that you have configured your PayPal account to enable IPN”

Step 6. Click on “Update Settings” button

INSERT FORM INTO A PAGE

Step 1. Go to Pages

Step 2. Go to Add new

Step 3. Add a page title

Step 4. Click on “Add form” button over the top of content area

Step 5. Select a form

Step 6. Check “Enable Ajax”

Step 7. Click on “Insert Form” button

Step 8. Click on “Update” button

Shortcodes setup

Add shortcode for clients/providers to manage they’re appointments:

Step 1. Go to Pages

Step 2. Go to Add new

Step 3. Add a page title

Step 4. In the content area add shortcode to display client appointments: [ga_appointments] or to display provider appointments: [ga_provider_appointments]

Step 5. Publish page

Show appointments pages in the navigation only for clients/providers:

Step 1. Go to Appearance

Step 2. Go to Menus

Step 3. Click Screen Options on top right admin

Step 4. Check CSS Classes to enable menu item CSS Classes

Step 5. Find the clients/providers page you added in the navigation

Step 6. Add class “ga_customer_page” or “ga_provider_page”

The way it works, if a user is logged and is a client or a provider those pages will be visible only to them in the navigation.

Shortcodes have options for pagination, pagelen option defines how many appointments will be displayed per one page. default length is 8 appointments

Plugin Options


gAppointments comes with a lot of options to help you customize the plugin. Go to gAppointments > Settings to configure.

General

  • Time Zone – Select your desired time zone for calendar date and time.
  • Cancel unpaid appointments – Pending unpaid appointments will be automatically cancelled after this set time and that appointment time will be freed. Enter 0 to disable.
  • Auto complete appointments – Confirmed appointments will be automatically completed after the duration ended.
  • Week Starts On – Set calendar first day of the week.

Calendar

Define working hours, breaks and non working days if a service doesn’t have any providers. Here you can also set the schedule for bookable dates.

Policies

  • Auto confirm appointments – Automatically confirm all appointments, except the ones that are pending payment, those ones will be automatically confirmed after the payment was received.
  • Provider confirms own appointments – Allow service providers to confirm pending appointments assigned to them.
  • Cancellation Policy – Allow clients to cancel pending appointments.
  • Provider Cancellation Policy – Allow service providers to cancel pending appointments assigned to them.
  • Provider Manages Schedule – Allow service providers to manage/edit they’re schedule on the front-end.

Notifications

Appointment notifications are sent to the client/service provider when an appointment is pending, scheduled or cancelled.

OPTIONS

  • From name – Change sender name
  • From email – Change sender email
  • Add calendar links in the client notification emails – Enable/disable calendar links in the client notification emails.
  • Add calendar links in the provider notification emails – Enable/disable calendar links in the provider notification emails.
  • Show links – Select which calendar links to be included in notification emails
  • Send notifications to client – You have 3 options to choose from, send pending email, confirmation email or cancelled email.
  • Send notifications to service provider – You have 3 options to choose from, send pending email, confirmation email or cancelled email.
Client Email Notification Templates
  • Pending Email Sent To Client – This email template will be sent to client on appointment pending
  • Confirmation Email Sent To Client – This email template will be sent to client on appointment confirmation
  • Cancelled Email Sent To Client – This email template will be sent to client on appointment cancellation
Provider Email Notification Templates
  • Pending Email Sent To Provider – This email template will be sent to service provider on appointment pending.
  • Confirmation Email Sent To Provider – This email template will be sent to service provider on new appointment pending.
  • Cancelled Email Sent To Provider – This email template will be sent to service provider on appointment cancellation.
Client Multiple Bookings Email Templates
  • Pending Multiple Bookings Email Send To Client – This email template will be sent to service client on multiple appointments pending.
  • Confirmation Multiple Bookings Email Send To Client – This email template will be sent to service client on multiple appointments confirmed.
Provider Multiple Bookings Email Templates
  • Pending Multiple Bookings Email Send To Provider – This email template will be sent to service provider on multiple appointments pending.
  • Confirmation Multiple Bookings Email Send To Provider – This email template will be sent to service provider on multiple appointments confirmed.

Available shortcodes to use in the email, some of them are not available depending on the email template:

  • %client_name% – Client name
  • %client_email% – Client email
  • %client_phone% – Client phone
  • %appointment_date% – Appointment date, example: (Friday, January 5 2018 on 10:00 am)
  • %service_name% – Service name
  • %provider_name% – Provider name
  • %provider_email% – Provider email
  • %message% – Optional message when an appointment is cancelled. Shortcode available only for cancelled email templates

Here is an email example.

OVERRIDING EMAIL TEMPLATE

You can override appointment email template by doing the following:

  1. Create gappointments folder inside your theme folder
  2. Create html_email.php file inside the folder you have created.
  3. Create your own HTML template for email

Sms Notifications

Sms notifications can be sent out with Twillio to client or service provider when an appointment is pending, confirmed or cancelled.

For gAppointments to send SMS Notifications with Twillio, install WP Twilio Core free plugin.

OPTIONS

  • Send notifications to client – You have 3 options to choose from, send pending sms, confirmation sms or cancelled sms notifications.
  • Send notifications to service provider – You have 3 options to choose from, send pending sms, confirmation sms or cancelled sms notifications.
Client SMS Notification Templates
  • Pending SMS Sent To Client – This sms template will be sent to client on appointment pending
  • Confirmation SMS Sent To Client – This sms template will be sent to client on appointment confirmation
  • Cancelled SMS Sent To Client – This sms template will be sent to client on appointment cancellation
Provider SMS Notification Templates
  • Pending SMS Sent To Provider – This sms template will be sent to service provider on appointment pending.
  • Confirmation SMS Sent To Provider – This sms template will be sent to service provider on new appointment pending.
  • Cancelled SMS Sent To Provider – This sms template will be sent to service provider on appointment cancellation.

Available shortcodes to use in sms notifications, some of them are not available depending on the notification template:

  • %client_name% – Client name
  • %client_email% – Client email
  • %client_phone% – Client phone
  • %appointment_date% – Appointment date, example: (Friday, January 5 2018 on 10:00 am)
  • %service_name% – Service name
  • %provider_name% – Provider name
  • %provider_email% – Provider email
  • %message% – Optional message when an appointment is cancelled. Shortcode available only for cancelled sms templates

Google Calendar

1. Create a Google Cloud Project:

  • Go to the Google Cloud Console.
  • Click on the project drop-down menu at the top left of the page and select “New Project.”
  • Enter a name for your project and choose an organization (if applicable). Click “Create.”

2. Enable the Calendar API:

  • In the Google Cloud Console, navigate to “APIs & Services” > “Library” from the left-hand menu.
  • Search for “Google Calendar API” and click on it.
  • Click the “Enable” button to enable the API for your project.

3. Create API Credentials:

  • In the Google Cloud Console, navigate to “APIs & Services” > “Credentials” from the left-hand menu.
  • Click the “Create Credentials” button and select “OAuth client ID.”
  • Select “Web Application”.
  • For Authorized JavaScript origins enter your website address by clicking “ADD URI”.
  • For Authorized redirect URIs enter your website address by appending “/google-auth”. It should look like this: https://example.com/google-auth
  • You will also need to copy the “Client ID” and “Client Secret” later for your website.

4. Authenticate gAppointments:

  • Go to the admin section of your website and navigate to gAppointments Settings and choose “Google Calendar”.
  • Enter “Client ID” and “Client Secret” from Google Cloud and save the settings.
  • After you save the settings click the button “Generate access code” to automaticaly get the code. You will be redirected to verify your Google account and after successful verification you will be returned to the same page. You should now see the “Access code” field filled in and you can save your settings.

After successful authorization, you should also see your Calendar ID.

  • Calendar ID – Select the calendar id to sync the appointments, by default primary calendar is used.
  • Synchronization modeOne-way sync pushes new appointments and any further changes to Google Calendar.
    Two-way front-end sync will fetch events from Google Calendar and remove corresponding time slots before displaying them in the calendar availability (this will lead to form loading delay).
  • Event summary – Appointment title showed in google calendar event.
  • Event description – Appointment description showed in google calendar event.
  • Add attendee – Add client name & email to google event. Google blocks creating too many events from same client email at the same. We recommend setting to No, and add the client information to event description.
  • Colors – Highlight color when synching an event.

Display

Here you can change the colors of the calendar.

Add To Calendar

  • Enable add to calendar links – Enable or disable calendar links. Links are inserted in the front-end shortcodes only for confirmed appointments.
  • Show links – Select which links to include. Example display below:
  • Calendar Location – Enter the text that will be used as location field in Calendar. You can use google maps location. If left empty, your website description is sent instead.

Translation

Translate calendar into your language. You can also translate every form individually by going to a form, Settings > gAppointments

Shortcodes


Use the shortcodes in any page you wish.

Customer appointments shortcode: [ga_appointments]
Clients can cancel appointments if you set Cancellation Policy as Yes on gAppointments > Settings > Policies, example shortcode display below:

Provider appointments shortcode: [ga_provider_appointments]
Providers can confirm/cancel appointments if you set Provider Cancellation Policy as Yes on gAppointments > Settings > Policies, example shortcode display below:

FAQ


How to setup 2 columns fields like in the demo

Step 1. Go to any form widget, click on Appearence and set Custom Css Class:

Left column css class: ga_col_left
Right column css class: ga_col_right

Step 2. On Appearence set Field Size to Large

What is the complete process for an appointment?

With the widest settings, client will do the followings on the front page:

Select a service

Select a service provider (if required)

Select a free time on the calendar schedule

Enter booking name, booking email fields (if required)

Click any payment gateway payment button (if required)

Redirected to a Thank You page

Is it necessary to have at least one service?

Yes. gAppointments requires at least one service to be defined.

Is it necessary to define service providers?

No. You may as well be working by yourself, doing your own business. Plugin will work properly without any service provider, i.e worker, defined. In this case gAppointments assumes that there is ONE service provider working, giving all the services.

How are the appointments confirmed?

If you have selected Auto Confirm field as Yes on plugin gAppointments > Settings > Policies, all appointments will be automatically confirmed, except the ones that are pending payment, those ones will be automatically confirmed after the payment was received.

How can I manually confirm an appointment?

Go to gAppointments > Appointments page, find the appointment based on date and time and change the status to Confirmed.

Is there a way to show appointments page on the navigation only for clients/providers?

If you added clients/provider appointments shortcode on any page and you want to show the page only to customer/provider, follow these steps:

Step 1. Go to Appearance

Step 2. Go to Menus

Step 3. Click Screen Options on top right admin

Step 4. Check CSS Classes to enable menu item CSS Classes

Step 5. Find the clients/providers page

Step 6. Add class "ga_customer_page" or "ga_provider_page"

The way it works, if a user is logged and is a client or a provider those pages will be visible only to them in the navigation.

I don’t want front end appointments, I want to enter them only manually from admin side. What should I do?

If you don't want your schedule to be seen either, then simply do not add the shortcode in your pages.

Support


If you face problems with the installation or customization of our product please do not hesitate to contact us via our profile page