In this discussion, we provide a free solution for businesses looking to transform their appointment scheduling by implementing an online booking system.
This solution provides:
- A form (web page) which can link to any number of calendars (for example rooms, consultants etc)
- A calendar configured to allowing bookings
Instructions:
- If not already done, register a new environment for your business. Otherwise, sign into eservicemanager.
- After signing into eservicemanager as an Administrator, click on the left menu, then select Resources, Calendars, then click the Add button.
- Provide a name for your new calendar, for example 'Meeting Room A', and ensure Allow Bookings is checked.
- Provide a number (in minutes) into the Booking Interval field.
- Click Save when your have entered all your calendar details.
- Click the Share button to produce a unique URL for your calendar. From the URL, you will need to extract and copy the calendar ID.
https://www.eservicemanager.com.au/saas/calendar/id
You will need this ID later on. - Click on the left menu, select New, then Location. Otherwise, search for an existing Location record and open it.
- A new or existing Location record appears. Provide details of the location your patrons will be registering against. Once you have completed the details, click on the Save button. Your new location record will be saved and assigned a new ID number. You will need this ID later on.
- Click on the left menu, select Administration, Designer Toolbox, Profiles, then click the Edit Profile button along the 'Divisions' row.
- Click the Business Hours button on the row containing your Division details.
- Configure the Core Hours and Public Holidays and Exclusions for your Division, then click the Save button.
- Next, download the ZIP file attached to this discussion. It contains code you can copy into a new web style and web page.
- Click on the left menu, then select Administration, Designer Toolbox, Web Styles, then click the Add button.
- Provide a name for your new web style, for example 'Online Booking', and ensure Public is checked.
- Click Save when you have entered all your web style details.
- Click Edit CSS to the right of the web style you just created. Open the downloaded file with the CSS extension and copy the contents into the provided editor, then click Save.
- Click on the left menu, then select Administration, Designer Toolbox, Web Pages, then click the Add button.
- Provide a name for your new web page, for example 'Online Booking', ensure Public and OOTB Includes are checked, and the Web Style is populated with the name you provided in step 12.
- Click Save when you have entered all your web page details.
- Click Edit Page to the right of the web page you just created. When the web page editor opens, click on the Import button on the toolbar. Open the downloaded file with the HTML extension and copy the contents into the provided editor.
- In the HTML code, find and replace the following with the ID you previously noted from step 8, where X must be your location ID.
"cboLocation": X,
- Click the Import button when you're ready. The web page should populate and display the pre-coded form. Click the Save button on the toolbar.
- Back in the Web Pages tab, click on the Share button against the new web page you just created. This will provide a unique URL to the web page. Try opening the link into a new browser window. Take note of the page name that is allocated to use later on. The calendar ID must be included in the URL path as shown below:
https://www.eservicemanager.com.au/saas/page/mybusiness/pagename?calendar=X
mybusiness = your division name
pagename = your web page name
X = calendar ID from step 6 - You may customise the request details submitted to the platform by reviewing the postcalendarappointment API. Edit the JavaScript code in the Web Page based on your requirements.
Your online booking form is ready to go! Take this service further by creating a Visitor Registration System to present at reception.
