Transcripts
1. Welcome to my Skillshare class - Trailer: Hey, welcome to my
Skillshare class. My name is Patti. I'm a digital marketing
specialists in UX designer and I am making this class
to try and help you, avid website developers on wigs, try and maximize your
potential by adding great components and intuitive
designs to your websites. If you followed me before, great, if you're new, welcome. We are making a tourist website. And in this lesson we're gonna learn how to add
booking functions and member options to a
website which allows your potential customers to not only choose their packages, but pay for them and
access an area where they can edit and
reschedule them, member booking requests and other features or in a
very intuitive and easy to use manner where you
can be working in this beautiful nature
tourists company website which was made from scratch. And if you haven't
seen those classes, I definitely recommend you
go and see those as well. And we're going to use
Wix functions to add in different booking options for
a nice extreme and lay back holidays where users have the
ability To book and choose that adventure dates and then
pay for them at the end. What you waiting for
joining me in this class, It's a quick course, but it gets lots of information across. And hopefully when
you come out of this, you will learn how to
have your own website booking functions and services. This glass is primarily
aimed at all web developers, but mostly talked at
towards beginners as it really shows the basic functions
of Wix web development. What you're waiting for coming
joined me in this class.
2. Introduction and Setting Up: Hi, welcome to my
Skillshare class. Thank you for enrolling,
and I hope you take value away from this lesson
that you've enrolled on. We're going to be working
on this website that I put together in a previous
Skillshare class. However, if you have
your own Wix website, feel free to follow along and see what I do and
copy it in yours. We're gonna be
working on adding in new booking
functionalities without packages for our company. This is going to be
by using one of Wix is built-in booking
applications, which automatically
populates the website with a series of webpages, which enabled very quick
and rapid Islamisation to allow you to include your services and start
making payments as soon as you upgrade to one of
witnesses paid packages. In this class, we're
going to focus on the free version which is
available to everybody. And it's a very good
starting point to enabling bookings
for your services. And in this particular case, it's a nature towards company. Now when it comes to incorporating
things like bookings and purchasing
options on a website, you have to think about
the navigational journey. It's important to
make sure you put the book now or
pricing packages, the right locations where
you expect the customer to want to click in order
to make a potential sale. In our website, there
are two ways they can do if a customer is
going to come in, either knowing the location
or they're going to come in either knowing the kind of package or holiday
type that they want. And that gives us two options. We have fitted packages here. So each one of these
is going to lead to a page or a series of pages which contain the
types of packages that are available along with the
booking and pricing options. Or we have featured locations. There'll be some customers
that are interested in going into the United
Kingdom to Peru, etc.. And they want to find holidays
within that destination. It's important that we make our bookings as granular
and as modular as possible where we can give US as those options. Let's recap. We've created a beautiful
minimalistic website for a nature tourists
company to allow users to see the different packages and locations that we cater for. We have a nice
minimalistic header which has a series of sub pages. We have a nice hero banner, which has integrated parallax
and scrolling effects. We have feature packages
with hover boxes. When you hover over these the
dark and to make it obvious that you are clearly hovering
over a clickable link, we have featured locations which have the same kind
of effects where they inverse on hover,
which is quite nice. And then we have a
contact us form. What we're gonna do now is we're going to add
in a new header. We're going to call
this bookings. So this is why
users are going to be able to create bookings and see what packages they
want and can purchase. I'm obviously get in
touch with us for.
3. Adding your Booking Page: So to begin, let's
do as we intended, and we're going to add in a
new page called Bookings. You can come down here,
Manage Pages, add a new page. At a standard page. We're going to call it bookings. Now this will sit
in the menu bar. So if we hover over here, let me come to Manage
menu, Add New Item, site pages, and choose bookings apply and
it will sit for us. Now, obviously contact us is usually on the far
side of the header. Let's drag that in front of Contact Us so that it fits
nicely that next two packages. Now this is why
it uses are gonna come to see that Bookings to see what they've obviously enrolled onto or what
they've purchased. I'm going to show you how
using Editor X and Wix, how bookings is actually
made very simple because of the add-ins and the
booking apps that they have built into the
website builder tool.
4. Adding the Wix Booking Component: So as a first step, we're going to go
to the plus icon here and come down to bookings. Now what this will allow
you to do is add in a certain module to the
site which allows you to book clients and
pay for services. Now this is obviously
very important because we want to allow bookings
for holidays, and we also want to allow them
to pay for their services. If I add two site, it will add to the modules and all of the different
webpages that are unnecessary and the components for bookings through weeks. One of the first
things you'll probably notice after you've added in the bookings is on the right-hand side here
we have a members or a, an account icon menu
already created, which is really useful.
5. Navigating the Booking and Members Pages: Now that that's loaded in, you can see here that this login bar acts
as a member's area. Now we come to the top here, let me see what our pages, you will see a load of new
pages that have been inputted, inserted into our website. So before we had
home to bookings and now we have bookings pages
and we have members pages. Now these are important
because obviously whenever a user makes a booking, we'll ask them to make
an account so that we can track their bookings
and they can also make changes and adjustments
to their accounts at any purchases or bookings
that they've created. Let's start off by
just going through these pages and showcasing
what within them. So this is obviously going
to be the booking form page. So here we can see
a preset menu which obviously can be changed under the managed services
and settings options. We have the bookings checked. So basically, this is the
page that's going to come after they've purchased
a package through us. We have a service page. So this allows us to adjust to talk about the different
packages we have. So as an example, what we're going to
use this one for is some adventure or
extreme holidays. And we're gonna put
in the duration, the number of days, the
price where it occurs, and also then the dates on
which they can choose to go on this particular
package and includes things like our contact details now cancellation policies. We then have a book in calendar. So this is another great
place for users to see what different packages are occurring at different days. Then we have one service which allows people
to book online. So this is where
people are gonna see the packages and
book accordingly. Now they are the booking pages and we can go over to
the members pages now. So these are the accounts that pages that users will be able to create before they obviously go ahead and purchase any service or towards packages with us. The FDM, my account page. This has clearly been made to have different information on that relate to the
account holder. We have the wallet. So this is where he uses can
obviously put in their credit card details
and the debit card details. And then lastly, they
have my bookings. So any bookings that are
made by a potential client will be put here based on the bookings from
the booking pages. You can see we've now got a lot of different pages
and when they make sure that we incorporate all of these nicely into the website so the easy for users to follow. So if we can preview you and just try and preview what's going on with the
different pages. You can see here, under
the account page, we have my bookings, my
wallet, my accounts. And one thing we don't have is the accessibility to go and see the different
services we have. So in the next lesson, we are going to
start by populating the service pages within
the booking pages underneath here with
out-of-home packages so that users can go there and start
posting stuff from us.
6. Adding Tourist Packages: So one of the first things that we need to do is make sure our packages and booking pages
linked to the new pages, which will add it with the
Whigs booking component. We have a book in pages
and we have members pages. What we want to happen is as
users onto this homepage, they scroll down and they see fit speech packages or
the C featured locations. And when they click
on one of these, it goes to our packages
page where they can go and choose the
package and the location of that package and
then mix them bookings that the first thing
we need to do is make sure we reroute this button to the brand new
book online page. So let's click Manage menu, go to packages, change link, and then chose this to
make it book online. Now when you click on this
header banner at the top, it will bring us to the
new book, your line page. Let's try, try that out. Preview packages that you
can see when the packages page with the preset tabs which weeks gives you and
we're going to now choose and change accordingly. What we're gonna do
now is adapt this page to reflect our tourist
packages that we have. But if you click on this module, the option to go to
manage services, which will open up a pop-up box, which gives you a
wizard interface so that you can set up yourself. Now because we are creating bespoke tourist
packages where we're going to have a finite
number of individuals. We're going to choose the
multiple participants tab. This will then allow you to
choose whether it's a class. So whether it's a course, either one of these is fine because we're going
to adapt this to change it to a booking system
for a package for tourism. If we click on class, that
will give us the option here to make our own service. Here we will go on extreme
package adventures. I have a preset one
that I made before, and that's gonna be our title, location, date, and year. We can add an image. So let's use what are stock images that we had from previous projects. We can put in here. Join us for this
amazing excursion in South America for
seven days of fun. We can then choose
it as a class. And this allows us to have multiple participants and we can choose the capacity. Now obviously as a
tourist company, you'll probably going
to want to have 1520 participants any one time. We can choose a
price so we can put 750 pounds per person. You can have the option to add video conferencing
and things like that. Obviously, if this wasn't a tourist websites and also
pricing plans for members. So if you have any members
that join your website, you can actually
give them discounts or give them offers
if they are members. Let's click on Save. This will now save
one of our options. Let's do one more. We can call this
late back holiday, and we can call this,
let's say 25th. June 2022 shows cocktails. Uncensored. 14 days is a bit too much. Let's do seven days. And
then click on beach page. We can increase the capacity
for this one because it is obviously a relaxing holiday
and we can put it as 1250. And we can call this
Let's do 5-star to obviously make it
sorry about that. Five-star Sunday shows. Save. Now we have both of these here and these under our services. Click and if you close this now, you will see how they load in this package area already made for you with the pricing
and the booking options. Now obviously, within
these settings here you can choose what
this area looks like. So currently you can
customize the widgets, it as you please, the
services, the layout. So you might want to
have a longer layout or layouts with descriptions
is purely up to you. You can choose all the
layouts and paddings and the details and how it
looks, which is quite nice. In the display option, you can actually include the Read More link or the
self-service subtitles. So the protocol at the descriptions of each
one of the packages, the text and also the
design and divide layout. So it can be very
granular with this. This is obviously quite
big for my liking. So let's make these a bit smaller and make
them a bit more fun. This is now the
packages page complete. Now the next one,
we're going to start adopting the other
book in pages. So the suburbs pages,
calendars, etc. To make it easier for the user to book their package and
choose the dates accordingly. And then what we're gonna do is work on the
member pages and allow users to create memberships and look at that bookings
through those systems.
7. Setting up the scheduling calender: You will see here now that
we have the two packages and we want to
allow users to book one of these and go to a
calendar where they can choose that check-in time of when they want to
leave on the day. So if I say book now, you'll see here opens
up the calendar. Now if I navigate to me, you will see how the actual
service doesn't come up. We need to add in a new session and check-in
slots for this holiday. So if we take edit on this bookings calendar page
and then go manage services. You have the option here to
add sessions to one of these. Let's add sessions to the Peru. Now we're going to add
some check-in time. So the 18th, 18th,
that's the one. And we're going to
navigate to the 1800s. And we're going
to do start time. Let's say our flight is 930, that's that's the data we start. And we suggest to check-in
will take around two hours, does not repeat Save. Now this will obviously be a, it will come up in
the calendar if I hover over to May the 1800s. You'll see here now how we have the Participants area here. We've also added in a staff member for
all those wondering, yes, we have staff. And if you click here on the
book and kind of staff area, you can see the stuff that I've made and you can
add more staff members. In this particular case, Dave Hopper is a
certified Peru tour guide which is going to be joining these tourists, this service. Now if I go back, you
will see here how uses. If I click on Preview. People can see their holiday on the 1800s at 930 where
they can choose to slot. And if they take this,
that will then show the extreme holiday with Dave hopper and to our
check-in and that's the cost. If I go next, this will then
take uses to the PE area, which will allow users
to buy the package. Obviously, this is
currently using a free version of
the Wix website. Obviously, I'm not
going to be putting any payment details in here, but you can fill in the details. Switch Account, message,
phone number, etc. Go to, go to PE now and
I'll take uses to pay. And once they've paid, they'll get a great book
with a confirmation, confirmation email gone to them. And the ability for them to add the service
to the candidates, which is obviously
really helpful for them. What we've done here
is from the homepage, we've come to the packages area. We've chosen a package,
we've booked now. We've opened up the calendar. We've chosen a slot
on the 18th of May. And then next, then
we're able to see the what the detail
areas looks like pivot. Now in the next part we're
going to quickly look at the member's area and understand how that
works with the bookings. Go in bookings. You'll see here how
once you do have an upcoming booking done,
it will arrive here. And we're gonna quickly
customize this page to match with the nature
tourism company. And then we will call it a wrap and have a preview
of the live website.
8. Exploring the Members Area: In this final part of the class, we're going to quickly go
through the bookings page, which forms under the
membership and Logan area. When a user makes
a booking through the booking online
packages area or their bookings and the
histories will come up in this managed
bookings area. So Wix automatically
does this all for you to make the process a
lot easier to manage. And you have the ability here to customize each one of
these pages at the top, the certain subset menu,
as you can see here. Now obviously we want to
try and keep the theme of this website nice and
similar to the main website. So if I click on the
settings area here, I can choose mobile,
mobile cards. So I membership profile cards, which can be customized
to your heart's desire when you want them squared
are some circular, obviously suck and
it's quite nice. You can choose the
design as well as the background and
stylings for that. You can actually go
to the main page itself and go back
to the images, the inspector area for the
number of widgets area, and choose the height and the
flexibility of fat as well. But what we're gonna
do here is go to the Settings area within
the My Bookings tab. And you can customize the
different options here from the design to the
link into the text. So if I click on Customize, you'll see here that it gives
you the different options. So here are some
preset of examples, so you can see what
it would look like. So if I move this, you
can imagine this being the extreme package to Peru
with the check-in time, the date, and the options to canceled or rescheduled as well. Let's go click on
the Account area. So the account area, it gives
you the option to provide users with the
different accounts. I think CSF will click on
this and click Manage fields. You'll see how there are some preset fields
already put here, but you can add more
fields if you like, be addressed titled birth, their company custom fields. So you can, you can put in a, you might want to put a
little bio for example. But these are all
options you have here, which relates back to the main booking that happens as well. And you can see
here what it looks like afterwards as well. I think I think that's going
to, we can call it a rack that what we've
done in this class is shown how to add a booking functionality
to your Tours Company. Now obviously this
is just for tourism, but you can use the
same techniques in this video for any
other service online, be it from booking
classes, studio classes, yoga classes, restaurant orders, online orders,
e-commerce as well. Obviously, when it
comes to actually doing payments and adding
payment information, you have to upgrade to
premium pipeline package, which normally costs
somewhere between ten to 15 pounds a month. It can be more depending on the domain and the
options you choose. But as a free service, at least to get started, it was very easy process
as simple as just adding in bookings area and
obviously a member's area, which you can obviously then choose and customized
accordingly. I hope you found
this class useful again as short and simple. And I didn't want to
make it too complicated. But if you have any questions, please leave some comments
in the discussion area. And I do look forward to seeing your live Wix websites
with bookings on there. I'll try the bookings myself. Subdue, put them in the
projects area of this class. And if you have any
questions, do ask them. I'm please leave a
review after you finish this class as it
really helps out my channel. Yeah, thank you for
stopping by and joining, and I'll see you
in the next class.
Saad Bhatty, GeoTiktoker and UX/UI Designer
