A Simple Guide to Designing Your Appointment Scheduling Website on Zoho Bookings

A Simple Guide to Designing Your Appointment Scheduling Website on Zoho Bookings

Hey everyone!

My name is Akarsh, an intern at Zoho and I hope that you are safe and sound during these testing times. I will regularly be posting about booking pages in this community page and I am looking forward to helping you out in creating some great booking pages that you can use to showcase your business. If you have any doubts or clarifications regarding this guide, feel free to comment below. So, let us get started!

If you are interested in reading more articles like these, click here.

Why do you need a good-looking scheduling website?



Your appointment scheduling page is a critical part of your organisation’s image. Most studies have shown that a great online experience instils a sense of trustworthiness and confidence in your customer’s decision of doing business with you. Hence, it is crucial that you offer a good-looking and convenient appointment booking experience to your clientele so that you can have more people wanting to do business with you from initial impressions alone. In this guide, we are going to show you how to do so effectively with minimal time and effort. So, put on your creative hats and let us begin!


Imagining your appointment scheduling page

When you started thinking about your appointment scheduling page, how did you imagine it in your mind? Getting at least a vague image of what your result should be the first step that you are going to take. If you have seen a appointment scheduling page anywhere in the past that impressed you, you may draw references to it while imagining your own page. In case you are finding it hard to do so, try looking around the internet to get inspiration from what others have done. Check out other appointment scheduling websites, landing pages, websites and other sources that give you some clarity and inspiration on what direction you should be heading in when you are designing your scheduling page. Try to carefully analyze the elements in these websites to look for signature characteristics that are used extensively in your industry. For example, you are far more likely to see colors like sky blue and grass green in the spa industry as compared to colors like black and red because the former ones are far more peaceful and calmer to human eyes. Once you have an idea on how your page should look like, from hereon, everything that you read should help you lead to that as a result.


Picking the right tool for the job

For this guide, we are going to use just the on-board customization options for designing the appointment scheduling page. This way, we can keep the whole process simple and quick with minimal effort. The customization options that are present in Zoho Bookings can transform the look of your appointment scheduling page if done right.
Now, where are these customization options that we are talking about? If you are on the home page of Zoho Bookings, navigate to the workspace settings page by clicking on the gear icon on the top right corner that says Manage Business. Click on the Workspaces option on the left pane after which, you should click on the workspace for which you want to design the appointment scheduling page. Scroll to the bottom of all options that are available and click on the Booking Page Settings to get started on our process.



On the right half of the page, you will see that the options given are divided into two sections: Header Options and Footer Options. Like the names infer, you will be able to edit the elements that are present in the header and footer of your appointment scheduling page. Here is what each of them mean:

Header Elements: Logo - This is the top left corner of the page where your company logo goes. Ensure that you upload a PNG version of your logo in which the background is transparent. This gives a professional look to the logo on your page.
Header Elements: Title - The text right next to the company logo is the title which can be edited to say either your company name or any other text of your liking.
Footer Elements: Contact Number – The contact number that you need your customers can use to contact you goes here, on the page footer.
Footer Elements: Email Address – Same as the contact number, give your email address to through which your customers can reach out to you.
Footer Elements: Facebook – Your Facebook tag goes in here. Your tag comes in after https://www.facebook.com/ on your Facebook URL.
Footer Elements: Twitter – Likewise with Twitter. Your tag comes in after https://twitter.com/ on your Twitter URL.
Footer Elements: Instagram – Just like Facebook and Twitter. Your tag comes in after https://twitter.com/ on your Instagram URL.
Let us go over the Booking Page Themes next.



You have 4 options to pick a theme for your page. The Default and Modern Web templates let you customize further than just picking the style from the theme with options to change the color scheme, which we will go over in a short while. The Classic and Fresh themes do not offer any options to customize their color schemes and are perfect for those who just want a simple theme for their appointment scheduling page without having to spend too much time tweaking it.
Like we had mentioned earlier, the Default and Modern Web offer customizability in terms of the color schemes that they can portray. While the Default option offers you 10 pre-set colors on your header that you can try, the Modern Web allows you to pick any color from 16 million colours to be set on the text, buttons and background according to your liking. In this way, the Modern Web is what we would recommend as it offers more granular controls over your appointment scheduling page theme when compared to the other options.
Under the color options in Modern Web you will be able to see 11 pre-set color schemes that you can check out on your appointment scheduling page. Try out the ones which you think may suit your appointment scheduling page well. If you need to apply something that is not offered in the pre-set schemes, click on the custom scheme at the very end (the one that looks like part of a rainbow in a box) to customize every part to your liking. It even offers a numerical hex value input so that you can precisely get the color that you need.
After that, you will see the Banner options where you can edit the Title, Description, Button Text and the Background Image that goes into your appointment scheduling page.



Custom Colors offer complete control over what you need in terms of the colors of your page.


Getting your resources that you need

For this specific guide, you will just need a place from where you can get your background image. If you have an image already that you want, go ahead and skip to the next part of the guide. If not, there are several websites on the internet where you will be able to purchase an image or get free royalty-free images. Please do note that sites that offer royalty-free images may not give you the same quality or specificity of paid ones. Some of the websites that we offer are:

Paid Sites:

Royalty free sites:
https://www.freepik.com/ (You can get paid ones here as well.)


Creating your background image

In this specific guide, we will not be editing any part of the image as we are going with just the image itself as the background. So, all you need to do is use your own image or go through the website of your preference and download one that you think is the right fit for your appointment scheduling website. Ensure that the image isn’t too cluttered and is visibly pleasing as it can portray a good and positive look to your page. Also, it will be much better if the majority of colors in the image match the color of your logo as it will make the design of your page look seamless and uniform although it is not mandatory to do so.


Picking out your color scheme in Zoho Bookings

For choosing the color scheme of your appointment scheduling page, the first step that you need to take is to observe your background image and your logo and answer the following questions with a color or two:
  1. Which colors stand out the most and catch your attention at first glance, positively?
  2. Which colors compliment your background image and your logo very well?
  3. Which color from them would look the best on buttons and text so that they contrast well with the background?
If you have a color or two that answers these questions for you, then that is probably what you are looking for. Don’t forget that you can always apply a certain combination of colors and try them out on the appointment scheduling page to see if it goes well. Also, ensure that you try all colors that you think may be good because sometimes, the colors that you think aren’t that great may be the best fit for your appointment scheduling page as a whole.
If you have a website for your organization which follows a certain style and color pattern, it may be better just to go with those specific colors and backgrounds that look just like it as it helps put both together as a visually whole and uniform package to your customer. This makes your website and bookings page look like a very professionally done experience.



Note: For every change or edit that you make to your appointment scheduling page, check out the page after doing so by clicking the Go To button at the very end of your workspace options so that you get an idea of how it looks on your appointment scheduling website.


Adding text to your page

Under the Banner section in Booking Page Themes, there are 3 places where you will have to give sentences or phrases on your appointment scheduling page: Title, Description and the Button Text. For the Title and Description, you can get creative and write anything that you think is appropriate and attractive for your business. As for the Button Text, you are pretty much limited to phrases that say that the final button on your appointment scheduling page confirms the details entered by the customer and confirms the booking. Here are some of our suggestions for each field:

Title
  1. Welcome to <your organization name>.
  2. Hi there! Let us get your slot booked with us.
  3. Let us get started with your appointment.
Description
  1. Book an appointment with us today and get started on an amazing experience.
  2. Your journey to an amazing experience starts in just a few clicks.
  3. Please enter the required details and confirm your booking according to your convenience.
Button Text
  1. Book Now
  2. Confirm My Booking
  3. Confirm
Feel free to try out your own suggestions and do not forget to check out your page with the changes done so that you get a feel on how it looks like to your customers.


The last thing to do after everything else

Get feedback! Work on your page until you have done the best you can and try to show it to some people (your colleagues, friends or family) that you are comfortable with seeing what they think of it. Who knows, perhaps they will point out a thing or two that can be improved which might have been missed by you because you were so focused on getting everything else right as well. This happens to the best of us and it is always a wise idea to get opinions from others and incorporate those into your design if you think that they make your page better. Ask for feedback from your customers as well after they start using it so that you can make the page easier for them to use to book appointments with you. If you have followed and implemented most of what we have said in this guide then congrats, you have designed an awesome appointment scheduling website all by yourself! Way to go!

I hope that you have found this guide to be helpful to you. Please share this with anyone who you know will benefit from this guide. Once again, let me know of any questions that you have via the comments sections down below.

Note: Some of features mentioned in this guide are only available on the premium subscription. 

We have more articles on appointment scheduling sites for you! Check some of them out below:

    • Sticky Posts

    • Announcing: custom color palette + free workshop

      Hello everyone, We're excited to share new feature in Zoho Bookings—a color palette within booking page themes. You'll find this option under Manage Bookings > Workspaces > Booking Page Themes. You can customize the color of every element in your booking page and even alter the transparency of your background image. Please note that this is a paid feature included in the Basic and Premium plans. At the moment, it's available only under the Modern Web theme. This means you can create billions (7,
    • Complete walk-through of Zoho Bookings (video)

      Save time for both you and your customers. Use Zoho Bookings, the appointment scheduling app from Zoho, to free yourself from email and paper-based scheduling. Zoho Bookings can give you a common calendar by syncing multiple calendars, including yours and your staff's. Your customers can book a time convenient for them, and pay for services, through your website or the customizable webpage features available in Zoho Bookings. They'll also get emails reminding them about their appointments and any
    • New Features: Service Availability and staff booking page themes!

      Dear All,  Want a dedicated schedule for your one-on-one services? How would it feel to have one-on-one services open for consultations only during certain times? You need a superpower to make that happen and we give it to you - Service Availability is
    • Zoho Bookings has a new pricing - Pay per user

      Dear customers, Businesses around the world use Zoho Bookings. Customers have booked 1.5 million appointments and over 200K online meetings using Bookings. We are only set to cross more milestones, thanks to your support. We are excited to introduce to
    • Zoho Bookings outage on 30th June in the US data center

      Dear customers, While we profusely thank you for your patience when we were busy identifying the issue that caused the outage in our US data center, we sincerely apologize for the trouble it has caused you. It was unfortunate but the events that triggered
    • Recent Topics

    • How can I insert and update field data of a sub-form without adding data into the main form’s mandatory fields.

      1. I have a main form that contains a sub-form. I need to update the data of the sub-form from a function, but I am unable to do so. How can I achieve this in Zoho Creator? 2. How can I insert data into a sub-form without inserting data into the mandatory
    • How to autorespond for inactive users?

      Hi, we have a few inactive users that we would like to set up an autorespond to the sender telling that the email addresses are no longer active. How can we do that?
    • Cannot view or interact with polls on IOS

      When testing with Android the user will receive a pop up message when a poll is started and be able to access polls via the more menu. This is not the case when using IOS phones, there seems to be no way to view or interact at all.
    • Calendar view not working in Zoho Projects

      Hello Zoho team! Since this morning, clicking on the "Calendar" link in the Projects Menu doesn't do anything. It seems to refresh the page, but it doesn't open the calendar view for tasks. It affects every user in my company. Closing and opening the
    • Multi Select Filter off comma separated values

      Hey friends! I have a query table for a couple of dashboards/ charts. In one of the dashboards, I'm trying to create a multi select filter for the service that is being sold. The way we look at services is by a CRM field titled, "Mail Lead Entities,"
    • Dashboard filter applied to all reports but not visible on report

      Hi, I have two reports which shows sales transactions data - one is graph and the other a pivot table. Both reports use the same base table. There are no filters on the reports so it shows all transactions for the last 6 months. I want to create a dashboard that includes the graph and the pivot table report. However, I want the dashboard to have a fixed date filter that only shows the last 30 days of data i.e. filtering the underlying graph and pivot table to show the last 30 days of order data.
    • Equipment Scheduling for Efficient Field Service Operations

      Zoho FSM helps you nail the critical aspect of field service management, i.e., scheduling the right technicians to the service appointments. Ensuring that technicians have access to the right tools and machinery for their job is also of paramount importance.
    • Chat issues

      I am having a couple problems with the zoho chat feature. When I use Chat from the App bar, not everyone is getting messages (these are to different accounts, Yahoo & Gmail). I did finally get the Users to show up correctly. However, when in an active chat with someone, I only get one sound notification. No other notifications, pop up or otherwise, come through to alert if another message was sent. Also, the bottom Chat bar that shows Active chats while I am in email does not show any online contacts
    • Problem with multiple pages record template

      Hi, I have a record template with multiple pages. When I print, it has gaps between pages. How can i fix it?
    • Field Update: can't find a custom multi-line text field in the options list

      I want to update a custom text field (large size multi-line: 32000 characters) that I have added in the Accounts module using this functionality https://help.zoho.com/portal/en/kb/crm/automate-business-processes/actions/articles/field-updates , but I
    • Zoho One Datensicherung möglich

      Gibt es eine Zoho One Datensicherung über alle Apps mit eindeutigen Datensatz-Id´s eines Kontaktes in allen Apps und mit allen Bildern (insbesondere Artikel-Bilder)? Wir haben festgestellt, dass die Zoho Books Datensicherung keine Bilder sichert. Und
    • Pop Up

      Hello, I want to automatically display the information of the attached data in the product module in the related list section of my data in the lead module when the current time matches the "Call Time" field of my data in the leads module. How can I achieve
    • New feature alert: Witness signing is now available in Zoho Sign

      Hello! Getting documents signed with confidence in Zoho Sign just got a major boost! We're delighted to introduce witness signing, where other individuals or entities can be designated as witnesses to observe the signing process and add their signatures
    • How to report and analyze a multi-select field entries distinctly ?

      As many of CRM users I have many multi-select fields that allows me to choose more than one chose in one cell for a specific filed Like: Field A - A;BC - A;C -B;C But when reporting the field it will handle each cell as a "String" not multiple entries
    • Get the capability to convert documents to different formats

      Hello users, In this article, we'll be exploring the Conversion API in Zoho Office Integrator to understand how it can be used to convert documents to different formats right from your web app. Before we get to the details of the Conversion API, here's
    • Issues with certain CRM, Desk & webhook blocks in Guided Conversations

      Good day I have been attempting to add a block on our guided conversations, which give our customers relavent information based on their queries. The issue is that when I attempt to use a block that fetches data I get the following error popup: Cannot
    • Use Zoho Creator as a source for merge templates in Zoho Writer

      Hello all! We're excited to share that we've enhanced Zoho Creator's integration with Zoho Writer to make this combination even more powerful. You can now use Zoho Creator as a data source for mail merge templates in Zoho Writer. Making more data from
    • Can't delete/hide related lists

      Hi, Maybe I'm missing something, but I can't seem to find where I delete or hide related lists in a module. When I go to a record and click the little arrow on the right next to the related list, I only get the option to select what fields in that list
    • Make Widgets Clickable or Copiable

      Hi, I created a KPI Widget in Zoho Analytics whose content I would like the users that see my dashboard could copy or click and be redirected elsewhere. Yes, I'm aware I can create a Text Box for that instead of a Widget, but the problem is that the link
    • Address Autofill

      Hi I'm having issues with the address autofill tutorial (https://zurl.co/rGXQ). I have followed each step in the tutorial, but when i paste the code into a workflow/function, i'm getting the following error code: Improper code format Correct format :
    • Sync custom module ID to Lead module

      Hello, I am trying to sync Contract ID (custom module) from Deal module. I have an existing function that whenever a contract is created, it will automatically creating deals based on the frequency of the contract. Now i am having problem to show the
    • In Kiosk, please support "File upload field" in the "Field Update" action

      Hello. Supporting "File upload field" in the "Field Update" actions would be a great addition to Kiosk Studio. I would appreciate it if you could evaluate it. Saludos,
    • can I link a contacts to multiple accounts

      can I link a contacts to multiple accounts
    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for
    • For security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account.

      Hello Zoho Even if we open 10-15 windows in still we are getting our accounts locked with error " For security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account. "
    • Launching CPQ for Zoho CRM! An in-built solution for bespoke quote management

      Hello everyone, We are thrilled to announce the public release of CPQ (Configure, Price, Quote) for Zoho CRM, which is a fundamental block in sales management. NOTE: CPQ was a public early access feature from March 2023 — January 2024. Since February
    • Add an action to set agent as a member of a team in zoho desk

      Hi, Please add an action to zoho flow to set agent as a member of a team in zoho desk (add to a team or remove from a team). Regards, Ram
    • Power of Automation :: Automatically set the dependency between Parent task and the respective sub tasks

      A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate complex tasks and
    • Spell Check default language

      Hello All, Is it possible to set the Spell Check default language? I can't find it in the settings. Thanks a lot! Levente
    • Function #4: Schedule Customer Statements

      Regularly sending statements to customers is an imperative part of many business processes as it helps foster strong customer relationships and provides timely guidance on payments. While you can generate the statement of accounts and have it sent over
    • Music files on Zoho Docs

      1) Uploaded a ma3 music file from Itunes.  When I click on the link, i go to the page and see a music player but it doesn't play.  Clicking on the play arrow does nothing.  How to fix???? 2) Also, when i put up a .zip file  and goto the page, anyone download it.  That's fine. But with a music file, all I get is that non functional player with no way to simply download the song. Do I have to zip every song so it can be downloaded?
    • Restrict Employees Access to Zoho Support

      Dear Zoho Support Team, Greetings! I am the focal point for all Zoho-related matters in our organization, and I would like to request the following features to help us streamline and centralize our support interactions. We request that zoho one support
    • How to import timesheets or entries into a projecgt

      How can one import timesheets into a project via a csv file?
    • Issues with Agent Forwarding Card in Zobot

      I implemented an Agent Forwarding Card in a Zobot that I created. There are a few issues with the way the card functions in an actual chat. The way it is designed right now is not easy to use and is not intuitive. Here are a few of the issues I have with
    • Automatic License Management Upon User Deactivation in Zoho One

      Dear Zoho Team, We would like to propose a feature enhancement for Zoho One regarding license management. Currently, when a user is deactivated, their license is not automatically downgraded or removed from our account. Zoho explains this behavior by
    • Shared Snippets Everyone

      Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets
    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child
    • How to suppress display of "USD" of currency field?

    • When is Zoho Vault getting fuzzy search?

      Seeing posts on here dating back as far as 3 years complaining about Vaults search functionality. It’s terrible. Please include fuzzy search, and sorting of results according to “most applicable”; not just alphabetically.
    • Automation#22 Track Ticket Duration at Specific Status

      Hello Everyone! Welcome back to the Community Learning Series! Today, we explore how Zylker Techfix, a gadget servicing firm, boosted productivity by tracking the time spent at a particular ticket status in Zoho Desk. Zylker Techfix customized Zoho Desk’s
    • Next Page