Booked

Contents

1. Installation & Setup Guide

2. Custom Calendars

3. Default Time Slots

4. Custom Time Slots

5. Custom Fields

6. Shortcodes

7. Admin Appointment Creation/Cancellation

8. Actions & Filters (developers)

9. Add-On: Calendar Feeds

10. Add-On: Front-End Agents

11. Add-On: Payments with WooCommerce

12. Product Customizations

13. Translation & Text Changes

1. Installation & Setup Guide

Install the Booked Plugin

  1. First things first, go to Plugins > Add New.
  2. Upload the booked.zip plugin file and activate the Booked plugin.
  3. Yep, that's it! For more help with installing plugins, take a look at this quick guide.

Create a Profile Page (Registered Booking only)

If you would like your customers to be able to manage their own appointments and edit their profile, you'll want to create a profile page. Note: You can skip this if you're going to use Booked in "Guest Booking" mode.

  1. Create a page and give it a title. "Profile" works, but it can be whatever you want it to be.
  2. Add the [booked-profile] shortcode to the page so your users can log in to view their profile.
  3. You'll probably want to redirect your users to this page upon booking, so go into the Settings panel and choose "
  5. You're done!

WordPress Date/Time Settings

One of the first things you'll want to take care of is to setup your Date/Time settings within WordPress. These settings control some aspects of Booked. Head over to Settings > General to set your Timezone, Date Format, Time Format, and the Week Starts On settings. Booked uses all of them.

The Booked Settings Panel

Head on over to the Appointments > Settings page to familiarize yourself with the settings panel for Booked.

GENERAL SETTINGS

  1. Booking Type - You can choose between "Registered" and "Guest" booking. Registered allows your customers to book appointments under their own user account. The bonus here is that you can create a Profile page for them to manage their appointments (see above). Guest booking simply asks for a Name and Email Address to book an appointment. No user is created.
  2. Appointment Booking Redirect -There are three options here:
    1. No Redirect - This will simply reload the appointment list dynamically and leave them on the current page.
    2. Auto-Detect Profile Page - This will find the page you put the [booked-profile] shortcode on and redirect them there after booking. This only works with Registered booking.
    3. Choose a Specific Page - This allows you to specify any page your site to redirect to. Great for simple Thank You pages or anything else you might want to display after booking.
  3. Login Redirect - When using the [booked-login] anywhere else but the Profile page, you can tell Booked where to redirect them. Either back to the same page or some other page. This is useful if you're hiding the appointment booking calendar from non-logged in users and want to include a login form on the page.
  4. Custom Login Tab Content - If you want to include some text (HTML allowed) above the login form fields, you can do that by using this field. This text will only display up on the login tab.
  5. Time Slot Intervals - This allows you to set the intervals needed when creating your time slots. If your time slots are fairly detailed, then you would want to reduce this to something like 5 minutes. This will not affect anything except for the administrative forms you use to add new time slots.
  6. Appointment Buffer - If you want to prevent your customers from booking appointments too close to the current date/time, you can set an appointment buffer. For example, a 24-hour appointment buffer window would prevent users from booking appointments less than a day in advance.
  7. Prevent Appointments Before/After Date - These two date picker options will allow you to globally block out appointments either before a date, after a date, or both.
  8. Cancellation Buffer - If you want to prevent your customers from cancelling appointments too close to the current date/time, you can set the cancellation buffer. For example, a 24-hour buffer window would prevent users from cancelling appointments less than a day in advance.
  9. Appointment Limit - This option is used to limit the number of active appointments a user can book at a time. This does not include past appointments, only upcoming ones.
  10. New Appointment Default - By default appointments must be approved when customers request them. However, if you want them to be automatically approved, you can set this option to "Approve Immediately".
  11. Display Options - This series of checkboxes lets you control the front-end display. You can hide many of the items if needed.
  12. Other Options - A few more checkboxes for customization.
  13. Front-End Color Settings - These color pickers allow you to customize the look of your front-end calendars, profile, and appointment lists.

EMAIL NOTIFICATIONS

All emails can be turned off one by one by simply removing the content of the email in the fields. If nothing is there then no email is sent. All emails have special tokens you can use in place of actual content. This content is placed into the email when it gets sent. The tokens are listed above each email form.

Customer Emails

  1. Appointment Reminders - Set up your appointment reminder interval and then customize the content of the emails to be sent to administrators or booking agents.
  2. Registration - This is the email that is sent to your new users, welcoming them to your website.
  3. Appointment Confirmation - This email is sent to the user when they book an appointment as a confirmation that the appointment has been submitted.
  4. Appointment Approval - This is the email that is sent to the user when their appointment is approved.
  5. Appointment Cancellation - This is the email that is sent to the user if their appointment is cancelled by the website admin.

Administrative Emails

  1. Appointment Reminders - Set up your appointment reminder interval and then customize the content of the emails to be sent to administrators or booking agents.
  2. New Appointment Request - This email is sent to the admin user when a new appointment is created and is now in the pending list.
  3. Appointment Cancellation - This email is sent to the admin user when a customer cancels an appointment from their profile.

Email Settings

  1. Logo Image - Upload your own logo or email banner to customize the look of your notification emails.
  2. Default Notification Email - This is where emails will be sent if nothing is set on the individual calendar.

TIME SLOTS

Please see the time slots documentation for this part.

CUSTOM TIME SLOTS

Please see the custom time slots documentation for this part.

CUSTOM FIELDS

Please see the custom fields documentation for this part.

EXPORT

You can export your appointment data using this tab. Simply select from the available export options and then click the Export Appointments button to export them all as a CSV file.

SHORTCODES

This tab is a useful reference tab to see all of the available shortcodes, including the shortcodes to display your custom calendars. Please see the custom calendars documentation and/or the shortcodes documentation for more information.

2. Custom Calendars

Booked allows you to create calendars for each service you offer. Each calendar can have its own default time slots, custom time slots and custom fields. This makes it incredibly powerful for business that offer different services on different days or times.

If you only offer a single service and do not need different calendars, you can stick with the "Default" calendar. Otherwise, you'll want to head over to the Appointments > Calendars section to add your calendars.

Once you have your calendars created, you can then head back to the Settings page and create time slots and custom fields for each calendar. Keep in mind two things:

  1. If you do not add calendar specific time slots or custom fields, that calendar will use the "Default" ones instead. If you do NOT want this to happen, you need to either remove the default time slots and fields, or create ones for the calendar.
  2. Each calendar can be assigned to either an Administrator or Booking Agent user. If assigned, then all notifications and calendar access will be specific to that user. Administrators can still see all of the calendars, but Booking Agents can only see calendars they are assigned to.

As an example regarding the first point:
If you have two services that share the same time slots but have different custom fields, you could create time slots under the "Default" calendar, and then leave the calendars blank. Add some custom fields to each calendar, and you're all set. They will both use the same time slot settings, but have different custom fields.

Displaying your calendars:
Each calendar uses the same [booked-calendar] shortcode, but you must add its ID as the "calendar" field. So for example, if your calendar ID is 123, your shortcode would look like this: 

[booked-calendar calendar="123"]

More shortcode examples here: Shortcodes

3. Default Time Slots

Setting your default time slots is at the heart of the Booked plugin. Each day is given default time slots. For example, if your business is open Monday – Friday from 8:00am – 4:00pm and you have 2 employees available every hour, you would create 2 times slots every hour from 8–4, Monday – Friday.

BULK TIME SLOT ENTRY

To quickly add a bunch of time slots, you can use the Bulk time slot entry option:

  1. Click "Add..." at the top of the day you're adding time slots to.
  2. Switch to the "Bulk" tab.
  3. Add a "Title" for these time slots if needed (optional).
  4. For the "Start time...", select "8:00am".
  5. For the "End time...", select "4:00pm".
  6. Leave the next dropdown as "Every 1 hour" to set your time slots every hour.
  7. Choose "2 time slots" as the last option, and then click "Add".
  8. Your available time slots for that day will then be added and your customers can start booking appointments!

SINGLE TIME SLOT ENTRY

Alternatively, you can add a single time slot to any day/time:

  1. Click "Add..." at the top of the day you're adding time slots to.
  2. Add a "Title" for these time slots if needed (optional).
  3. Choose a "Start time" and "End time" and then select how many time slots you want to add.
  4. Click "Add" and that time slot entry will be added as a default for that day.

4. Custom Time Slots

Adding Custom Time Slots

  1. Go to the Booked Settings panel and then go to the Custom Time Slots tab.
  2. Click the "Add Date(s)" button.
  3. Choose the calendar you want to use (if applicable).
  4. Choose the Start Date.
  5. If this is a one day setting, you can leave the End Date blank. If this is a date range, choose the End Date.
  6. To add a single time slot, click the "+ Single Time Slot" button. To bulk add time slots, click the "+ Bulk Time Slots" button.
  7. For single time slots, you'll choose how many available appointments for this time slot and then you'll choose the start and end times. Alternatively, you can check the "All day" checkbox to make this an all day time slot.
  8. To add bulk time slots, choose how many available appointments there are, choose a start and end time for the entire span of your day, choose the time between each slot if you need a 10 minute break for example. Then choose the interval for the time slots to be entered.

Adding Vacation/Closed Dates

  1. Go to the Booked Settings panel and then go to the Custom Time Slots tab.
  2. Click the "Add Date(s)" button.
  3. Choose the calendar you want to use (if applicable).
  4. Choose the Start Date.
  5. If this is a one day setting, you can leave the End Date blank. If this is a date range, choose the End Date.
  6. Check the "Disable appointments" checkbox to make this a vacation/closed date.
  7. That's it

5. Custom Fields

Booked allows you to create any number of Custom Fields to collect additional information when your customers are booking appointments.

Head over to the Appointments > Settings panel and then click on the Custom Fields tab. You can add custom fields to your custom calendars or just to the "Default" calendar. Each item can also be set as required if needed.

  1. Single Line Text: A simple text field for collecting text.
  2. Paragraph Text: A paragraph text field for collecting large chunks of text.
  3. Checkboxes/Radio Buttons: Add checkboxes and/or radio buttons as single or multiple options.
  4. Dropdown: Add a select dropdown to choose a single option.
  5. Text Content: Add custom text/html to your booking form.

6. Shortcodes

There are a number of shortcodes included to display specific content anywhere on your website. Let's start with the booking calendar/list.

Booked Calendar:

The [booked-calendar] shortcode displays the booking calendar (or single day) for your users to book appointments.

[booked-calendar]

Style:
This attribute let's you choose between the default calendar view or a single day "list" view.
[booked-calendar style="list"]

Switcher:
This attribute let's you display the "switcher" to swith between calendars on the front-end:
[booked-calendar switcher="true"]

Year, Month, and/or Day:
Use these attributes to display a specific "year" and/or "month". You can also add a "day" attribute when using the "list" style (see above).
[booked-calendar year="2016" month="3" day="15"]

Calendar:
Use the "calendar" attribute to display a specific calendar (if you have any created). Otherwise, Booked will simply display the default calendar. You must use the Calendar's ID (you can find calendar-specific shortcodes on the Settings screen).
[booked-calendar calendar="2"]

Size:
This attribute let's you change the size from the default full size to the "small" size if needed. This is good for calendars that are displayed in narrow areas.
[booked-calendar size="small"]

Members Only:
This attribute will hide the appointment calendar from non-logged-in users. This is great to use in conjunction with the Profile shortcode (below) to display a login form on a page, and then when the user logs in it will show them the profile page as well as a booking calendar.
[booked-calendar members-only="true"]

Booked Profile:

[booked-profile]

Use this shortcode on the page you're using for the profile view. This only works with "Registered Booking".

Booked Login Form:

[booked-login]

By default, this login form will show up in the profile shortcode for non-logged-in users. However, if you want to display the login form somewhere else, you can use this shortcode to display it.

Booked Appointments:

[booked-appointments]

If the need arises, you can use this shortcode to display the currently logged in user's upcoming appointments in a simple list view. This will only show upcoming appointments and nothing else. Good for sidebar widgets, etc.

7. Admin Appointment Creation/Cancellation

Appointment Creation

Your customers can book their own appointments from the front-end, but if you need to add an appointment from the administrative side, you can create appointments quickly and easily using the appointment calendar on the backend.

  1. Go to the Appointments > Settings page.
  2. You will see a big calendar. Find and click on the day for which you want to book the appointment.
  3. Find the time slot and click the "New Appointment..." button.
  4. If this is a current customer, you can simply search and select them from the user dropdown.
  5. If this is a new customer, you can quickly add them as a new user by using the registration fields. The first name and email are the only required fields.
  6. When the appointment is booked, the user will get an email welcoming them to the site (with a username/password) as well as a appointment confirmation email. These emails can be customized/turned off from the Booked Settings panel.

Appointment Cancellation

To cancel someone's appointment, simply find the appointment on the calendar and click the X next to their name in the time slot from which you want to remove them.

8. Actions & Filters (developers)

Booked Front-End Filters

Booked Front-End Actions

Booked Admin Filters

Booked Admin Actions

9. Add-On: Calendar Feeds

After installing and activating the Calendar Feeds add-on for Booked, you will see a new sub-menu item called "Calendar Feeds" under the "Appointments" menu. Click on that to access the URLs you can use to setup the feeds in your favorite calendar application.

Google Calendar

When viewing your calendar, look on the left side of the screen for the "Other Calendars" section. To the right of the title is a small arrow icon. Click that, and then click the "Add by URL" option:

Copy and paste in the feed URL you've chosen from the Booked settings screen. Click the "Add Calendar" button and your appointments will start to automatically load in and sync whenever a new one is added via your website.

Apple Calendar

With the calendar application open, go to "File > New Calendar Subscription...":

Copy and paste in the feed URL you've chosen from the Booked settings screen. Click the "Subscribe" button and your appointments will start to automatically load in and sync whenever a new one is added via your website.

Outlook

From the Tools menu select Account Settings. Click on the Internet Calendars tab. Click on the New button. Type or paste the Calendar Feed URL and then click Add.

In the Subscription Options dialog box, you can optionally rename the calendar.

10. Add-On: Front-End Agents

After installing and activating the Front-End Agents add-on for Booked, everything is fairly automated. There are no settings (yet) to apply. It simply converts the Profile pages of logged in Booking Agents (or admins) into the front-end agent view.

<?php echo '<img src="'.CP_PLUGIN_URL.'/css/images/default_thumbnail.png">'; ?>

Create a Profile Page (if you don't have one already)

To create the profile page, simply create a page and call it Profile (or whatever you'd like) and then place the following shortcode on the page:

[booked-profile]

Visit the Profile Page

Now that you have a Profile page, visit this page as a logged in Booking Agent or Administrator. You will see three tabs:

  1. Upcoming Appointments — These are the appointments in your assigned calendars that are upcoming. You can view and/or cancel them from this tab.
  2. Pending Appointments — These are appointments that were submitted but not approved yet. You can view, approve, and/or cancel them from this tab.
  3. Appointment History — This is where all of your past appointments will end up. You can view and/or delete them from this tab.

11. Add-On: Payments with WooCommerce

After installing and activating the Payments with WooCommerce add-on for Booked, you may see a message to install WooCommerce (if you don't have it installed already). Be sure to install WooCommerce before using this plugin.

Creating a Product for Booked

To create a new product, simply go to Products > Add Product.

  1. Give this new product a name. For example, if you have different packages for your bookings, you could call the first one Bronze Package.
  2. A description isn't necessary so you can skip the content area.
  3. Go right to the Product Data section below the editor (if you don't see it, check the box from the Screen Options panel at the top right) and check the box next to "Booked Appointment Service" and then provide a price for this product:

  4. These are the only three (3) required pieces of information. However, you can add attributes and variable pricing if needed (see the Attributes/Variable Pricing section below).

Adding a Product to the Booking Form

Once you have a few products added (in this example we added a Bronze, Silver and Gold package), go the Appointments > Settings panel and head over to the Custom Fields tab there.

  1. Click the "+ Paid Service Selector" button to use the new product selection field:


  2. Give this option a name, such as "Choose a Booking Package":


  3. Click the "+ Booked Appointment Service" button to add a WooCommerce product as an option. Add all of the choices you need for this specific dropdown:


  4. Save the custom fields and you're ready for paid appointments!

Attributes/Variable Pricing

In some cases you might have products with options that change the pricing of the appointment. For this, you would use WooCommerce's attributes and variable pricing. Please read up on how to create these from here: http://docs.woothemes.com/document/variable-product/

What Happens Next?

  1. A visitor will book an appointment. During this process, they will choose a product (and options if available) and submit the form to book the appointment.
  2. The appointment will be saved as "Awaiting Payment". The time slot will be filled for now.
  3. If you have your appointments set to auto-approve, then it will be approved at this point.
  4. The customer will be taken directly to checkout to pay for the appointment.
  5. Once paid, the appointment will be marked as "Paid".
  6. If the customer leaves the checkout process at any point, they can come back to pay later from their Profile page. If they never pay, the appointment stays forever as Awaiting Payment, which bring us to ...

Appointment Cleanup Options

If you head over to Appointments > Payment Options, you will see the options to enable Auto-Cleanup and a selection of schedule choices. This is highly recommended. If appointments are chosen but not paid for, they will stay in your calendar forever unless you manually remove them. To avoid this, you can enable the auto-cleanup feature at a set interval of your choosing.

12. Product Customizations

Customizations are not covered under support. This includes code changes, design changes, customization guidance, etc. We also do not provide a customization service at this time. However, we've partnered with the awesome folks over at WP Kraken, who can help get you what you need for sure. Check em' out!

13. Translation & Text Changes

Our products come with a language file that needs to be translated in order for it to display a different language. The easiest way to translate it is to install a great plugin like Loco Translate and do it via the WordPress admin panel:  http://wordpress.org/plugins/loco-translate/

Full Language Translating

  1. Once you have Loco Translate installed, head over to the main Loco Translate screen by going to Loco Translate > [Plugins] or [Themes] (depending on what you're translating).
  2. Find the theme/plugin in the list and click it, then click the [+ New Language] link above the list.
  3. If you see a "Template Missing" message, simply click "Skip Template".
  4. Choose the language for this translation from the dropdown.
  5. IMPORTANT: Make sure you choose the third radio button (System) in the next section. (languages/plugins or languages/themes) before clicking Start Translating. If you do not, then your translation file will be gone if/when you update the theme or plugin.
  6. Now, on the next page, you can simply go through and add/edit your translations by clicking on each string and adding the translation in the bottom box.
  7. When you're done, simply click "Save".
  8. Be sure that WordPress is set to use the same language you've translated from Settings > General (look for the language dropdown at the bottom).

The POEdit Method

You can use software like POEdit (  http://www.poedit.net/download.php) to translate the *.po file that's included with the theme or plugin. Just remember to put your translated files into the appropriate folder listed above and remember to update your translations when there's an update.

More information on translation can be found here as well: http://codex.wordpress.org/Installing_WordPress_in_Your_Language

Simple Text Changes

Sometimes you just need to change some of the text, from English to English. In this case, you could either create a second "English" translation file following the same directions above, or better yet, just add some custom code to your theme's functions.php file or create a custom single-file plugin that does this for you. In the following example, this code will change the "Search..." text in a search bar to say "Find..." instead: 

add_filter( 'gettext', 'my_custom_text_changes', 20, 3 );
function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Search...' :
            $translated_text = 'Find...';
        break;
    }
    return $translated_text;
}

As mentioned, you can open up your theme's functions.php file and add this code. Or a better method would be to create a simple single-file plugin that will allow you to add code like this without messing with the theme files (which might get overwritten when updating). The following is the code needed to create a very simple plugin. To create this yourself, go to your /wp-content/plugins/ folder on your server and add a file called my-custom-code.php (it can be named whatever you want). Then add the following code to that file: 

<?php
/*
Plugin Name: My Awesome Customizations
*/
add_filter( 'gettext', 'my_custom_text_changes', 20, 3 );
function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Search...' :
            $translated_text = 'Find...';
        break;
    }
    return $translated_text;
}
?>

Save the file, and then go onto your WordPress admin's plugins page. Find the plugin called "My Awesome Customizations" and activate it. That's it!

Also, to add more than one translation, you can add more case/break statements. Here's what that would look like if you wanted to change a custom post type called "recipes" to "books" in several locations (this will require changes to probably many more "cases", but this is an example. A developer might be needed for additional work:

function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Recipe' :
            $translated_text = 'Book';
        break;
        case 'Recipes' :
            $translated_text = 'Books';
        break;
        case 'recipe' :
            $translated_text = 'book';
        break;
        case 'recipes' :
            $translated_text = 'books';
        break;
    }
    return $translated_text;
}