JetAppointment Overview | Appointment plugin for Elementor

hello everyone this is al from open source channel welcome new episode today i'm going to talk about jet appointment but before we start don't forget to hit subscribe click on the bell icon so you can get notified when i publish new videos also don't forget to like and share by sharing you up with me and helping this channel grow faster so without any delay let's go and jump in wordpress anyway you can go to kokobok.com [Music] pluginsjet appointment here is the actual plugin we're going to look at to make this to work you need elementor and also you will need jet engine here i got a copy of wordpress with the jet engine elementor woocommerce as well yes you need woocommerce as well to get the payment and as you can see i got jetting jet engine i got jet appointment booking i got elementor and i got woocommerce as well for this demonstration i have already created a page and i have called it services i have edited the actual page in elementor and what i done i created a structure with two side and on each one of them i overload the actual plugin form as you can see here edit form if i go to the widget and i'm going to click on jet form i'm going to search it first here we go that's the actual form here right so i'm going to go out of here and we're going to start by creating inject engine some post types all right for this demonstration i'm going to create two type of post types i'm going to click on new i'm going to call it services the slide is going to be services we don't you know in lower case for labels you can leave it as a this is kind of optional or you can actually rename as you want for example add the new item you can actually change it to add new services this does it automatically so what you got to do just click on the field here and it says add new and then services as you can see here and you can do exactly the same over here as well okay as you can see it does it for you all you got to do is just change and add the word services so once that's been done i'm going to the advanced settings and make sure it is public the next thing i'm going to do i'm going to i'm going to leave it as a rewrite slide here tap is going to be post i'm going to change the icon to something more that i need and for the support i'm going to do also custom fields and alter i'm going to add a meta fields so for this one i'm going to call it engineer it's going to be a field i'm going to leave it as text and i make it required once i'm happy with that i'm going to press add the post type i'm going to create a new one post type and i'm going to call it providers in this case i'm going to say just provider again the labels you can leave it as it is this time i'm going to leave it i'm going to change the icon with this one and i'm going to also add new register support auto post format and custom fields as well for this one i'm going to call it service and make it not require this time once i'm happy i'm going to say add post type now once that's been done we go to start the appointments so let's go back here we're going to set up everything so this is where you start to set up i'm going to reset this one because i done it before so i'm going to do it again and i'll show you how i do it so when you still install the actual plugin this is where you start the setup and that's the full steps very easy to follow so the service post type i'm going to school services as you know with the net i'm going to add the providers in this case it's going to be the provider and i'm going to go to next here i'm going to add okay these ones are defaults okay that's the one comes with the actual plugins and you can actually add more in you know database uh information if you want in this case i cannot see for example phone number so i'm going to say new db column and i'm going to call it phone number then i'm going to do next and now we got the setup working hours now i'm going to leave it this as it is as i'm going to use it based on the individual in this case the engineer now what i'm trying to do here i'm going to recreate a booking appointment form to book a web designer or any individual any professional individual for a particular service so then ads i'm going to go to next i'm going to make it woocommerce integration because i want to get paid as well for it and i'm going to choose where do i want to create the form so i'm going to choose the jet engine i'm going to say create single service booking form and create simple page booking form so you can actually see both of them i'm gonna press finish and this part is done as you can see here the post app has been done and you can manage both the service and the providers the woocommerce integration has been done the created form is also on the done as well so i'm going to the plugin settings here you can actually manage the capacity now i'm going to you know make it simple and sleek so you you don't get a little bit overwhelmed with this it's not simple to really set up so i want to try to get as simple as possible the working hours as i said i'm leaving as it is i'm not going to change anything perhaps i'm only going to change well i'm leaving this because i'm happy with actual format as well but i'ma leave this and again this comes as a standard all right so what has been done as you can see on the left pane we got the providers and we got the services now let's go to labels first a second you can use custom labels yeah but again i'm not going to use that advanced now for example if you do this for a client in advanced you might and i say you might want to check this up so what happens you can actually hide the setup wizard as you can see here in appointments you go to setup so to make sure they don't make any problem with a website that they couldn't call you and you're going to waste your time to understand what's going on it is viable to hide the setup wizard in this case i'm going to do it this is just a demonstration if you use it for yourself you might want to leave this unchecked so we done that so let's go back to two so let's see now as you can see we did add the phone number because it was not in the database so we're up with that now let's go to providers and let's start a add a provider now the actual provider in this case for us is going to be the engineer the web designer whoever you want to be okay so i'm going to call it for example engineer the price engineer this is the slot and i'm going to show you for example when i'm going to do this schedule for the uh for the services for example let's go and say we're going to charge 50 or 15 pounds or whatever that you know euros whatever i'm saying 15 for example and here for the service i'm going to call it for example in my case for example let's call web designer or you could say consultant if you want to right now i'm going to add a custom schedule for the this particular engineer okay you can actually add a name of the engineer if you want to as well so i'm going to leave it as it is just to make it easy for you okay and i'm only going to change this let's say the actual slot i'm going to change to 15 minutes at the time so in this case it will be let's go up 15 for example for 15 minutes right so you think it's too much you can go down to 10 it doesn't matter this is just to show you now how much buffer time you need before the slot so for example in an hour you don't want four people new just in case anything happens say for example after each i don't know customer you want 20 minutes so i'm going to say 20 minutes i think this is actually ours so we don't want to do that we want to do this time here we go that's 20 minutes and before that so let's say just five minutes that would be 25 minutes if that makes sense right and you can add this one and what it is if the appointment is made and there is less than a certain amount of time and say five times whatever the appointments won't be available i'm going to leave this to make it easy off now here you can actually add days off say for example as it was before on the other page i'm going to say christmas holiday holiday here starting date let's go to december here we go i'm gonna say the last day of work is 17 we're going to take it easy we go back in january come back on a four for whatever doesn't really matter and i'm going to save that now you can actually do working days as well for example which days but again i'm going to make it easy right now which related services as you know we haven't done that yet so i'm going to just publish because what you could do you can actually select the in this case will be the engineer on the service part of it so i'm going to publish that and i'm going to show later what i'm talking about let's go back and let's create two services i'm going to services i'm going to add a new and the first one let's call it wordpress installation okay and as you can see select the provider in this case we're going to say engineer here we go price per slot i'm going to leave it because we already got the price on the engineer in this case you don't have the conflict the engineer we're gonna say service or consult that is up to you this is just for your information okay or you can actually add the name of the actual engineer again it's up to you and for the custom schedule i'm gonna leave it because as i said we have that already made on the engineer side of it okay on the actual provider in the case now if i go back to providers i'm going to show you what i'm talking about providers provider if i'm going to edit this one here now on the right side where we didn't put the service we got the wordpress installation already made now you can have a multiple services it does up to you i'm gonna just make it easy i'm gonna make one but if you make a second one uh for example okay let's do this i think it's much easier if we just do it uh than anything else let's say wordpress maintenance again i'm gonna do exactly the same no price up slot again engineer consult consultant here and i'm going to publish publish here as well so as you can see that has been done let's go back on the services so we got two services and we got one provider okay and we already got the slots now that is the actual page that i showed you there all right then i add already to the two form already put it there and the page i didn't want to board you a waste of the time on how to do it now we got one on the left here and that is a single service now before i do that okay let's go to jet engine because otherwise you're thinking what you're talking about al if i go to forms those ones were created when we done the appointment setup okay also the woocommerce information was already created so let's go back here you don't have to do anything on this so let's go on this one here there we go so on this one here i'm going to choose single service and on this one here i'm going to choose the static version and i'm gonna update now if you remember we add the phone number now let's go back here a second and let's go on each one of them and let's have a look i'm going to the single service booking form first and i'm going to press edit and as you can see here we don't have the field so what i'm going to do i'm going to add the field i'm going to edit i'm going to choose number the label is going to be let's go say phone number here i'm going to make sure it's required again it's up to you if you don't want to make it required i'm going to apply the changes so i'm going to choose sorry i'm going to move the book now button below the phone number i'm going to update just in case i lose then i'm going to edit the insert appointment and on the field here i want the phone number okay and again i'm gonna press update now this is the single service okay let's go back to the forms i'm going to the static and i'm going to do exactly the same i'm going to add the field edit phone number the label again phone number again i'm going to make it required and i'm going to press apply again insert appointment field is gonna be phone number and i'm gonna press update there we go so let's go here let me refresh that let me remove this one for a second so now we got the wordpress you go the engineer you can actually add that one but again it looks like i didn't do this book now update we need to change it otherwise you will get the phone number below the book looking a button there so all right now we got both forms on the same page just to test that out we can see now that we got the right composition except of the static we haven't finished that yet now if i go back to the wordpress and i'll go to pages for example i go here multiple pages that i have created for example you can see here i got one for single service or service single i named it now if i go this one here we got the service single in this case we'll talk about this particular one here okay so let me show you how it actually works it's very simple you put the email address in it then you go select a provider i add us an extra one but let's put engineer now i'm going to select my date say it's going to be on 29th and i'm going to choose my slot here that's the 15 minute slot 1250 1305 then i'm going to add my phone number then i'm going to press book now as you can see we got the check out now i haven't set up the actual checkout uh sorry the actual payment system as you can see here but you actually you can see the way it goes here right and you can place the order once you put all your information here okay i'm not gonna do this this is not the actual woocommerce tutorial is based on jet appointment so let's go back to the appointment plugin i'm going to go on the appointments and as you can see here we actually got the appointment and it says on old because we haven't paid all right now if we paid you have a different option here okay you got also completed in that case it will be completed cancel refer to the failed and this is all the integration with woocommerce so it will be done in automatic i'm gonna close this one here let me show you the other one so this is what's the actual single let me go back to the dashboard let's go to pages and i'm going to add one actually static okay now as you can see here the other one is static now here it's not showing the calendar but here it is now on this one i made a mistake this is the reason why now you can find algas as well um it looks like you got to put two engineers because they're two some kind of a conflict so i think i you know i have to add an extra provider technically that's all i have to do and now you can see here the correct code is kind of you know i i copy the correct code from the let me show you actually i have much better if i do this rather than telling you if i go back to elementor when i down the form the actual static that i actually added earlier on as well all i done was edit form and then save it again or update in this case for me right so when i done that let me do this here and update so now when i go out somehow it will give me the option to show the actual page with proper form with the actual calendar name as you can see here okay i hope it makes sense so engineer uh on this one i also change as you can see it goes red 23 is like 30 30s today so it's going blue that's the current date read when you hover on on top of it if i click it goes green as you can see then again green as well when i'm going to choose the actual timing email address again phone number i'm gonna put whatever and i'm gonna say book now and it should automatically send me to checkout with correct amount of money and i can place the order again if i add for example the correct payment system installed now when i'm going to refresh this page we should have two bookings as you can see here for both the engineer okay those the dates time and whatever and both are on old so this is how simple it actually is to install and get started with jet appointments don't forget to look at the description below you'll find all the links you need some of the links are affiliates so i can earn some money so i can make more tutorials and i'll grow to this channel to you it won't cost you any extra money so be sure for that so thanks guys again for being here today with me for this tutorial i hope you enjoyed as much as i did making it and i'll see you next time

Channel: OSC UK

Views: 245

Keywords: Crocoblock, crocoblock elementor, jet engine for elementor, crocoblock tutorial, elementor jet engine, elementor appointment plugin, jet engine plugin for elementor, elementor appointment booking, wordpress appointment booking plugin, wordpress appointment plugin, wordpress appointment booking, jet engine woocommerce, appointment woocommerce, woocommerce appointments

Id: I4wpQ2FI0p8

Length: 26min 8sec (1568 seconds)

Published: Sat Sep 25 2021