FastTrac: WebTrac App Cockpit Screens and Buttons
Summary
Join Brian Hatch, as he walks through using the WebTrac app cockpit and the process of creating screen layers with various design elements.
Video
Transcript
00:00:05:02 - 00:00:33:03
Brian Hatch
In this video, we'll give a walkthrough of using the WebTrac app cockpit and we'll walk through the process of creating screens and creating elements on those screens. When you initially log in to the cockpit URL, you'll be brought to the screen where you have your account listed in the top, right. The club underneath your account or clubs underneath your account will be in the pull down on the left and you'll be in the content area of the cockpit by default, when you first log in to the right of the area of your previous screen.
00:00:33:03 - 00:00:51:15
Brian Hatch
So this will be what you have currently displaying for the layer or screen that you're on in the app. And then if you click on any elements or any settings here in this area, the settings for those will be displayed on the right hand side of the screen. One of the first steps you'll probably do is build out at least one or two different layers above and beyond the home screen.
00:00:51:18 - 00:01:18:23
Brian Hatch
So your layers or screens are represented at this pulldown here. So to the right of that can click a little down arrow and I have the option to click new and add a new layer screen. You just give it a name. So we'll call one my account. Very common to have on my account screen listed. So now you'll see I have two different options and I pull down my initial home screen and I have a my account screen and they will add one more for an actively search screen.
00:01:18:23 - 00:01:43:01
Brian Hatch
So I just call it activity or activities or create that. So I have three different layers or screens that I can now configure within the cockpit. If I go back to my home screen, one of the first things you'll probably set on any screen that you create is a background image. So if I click on the little gear in the top right of the screen pulldown, I have my home screen settings and you can see I made label.
00:01:43:01 - 00:01:59:09
Brian Hatch
If I want to change that, I can adjust that here, but then I can set my background image on the option right below there. So your background image and really any images that you create, you're typically in to create those externally from the cockpit. So you can create those in Canva, Figma or in Photoshop or some other tool.
00:01:59:12 - 00:02:23:17
Brian Hatch
You'll build those options there and then you'll come into the cockpit and link those. Then we have an image guide available in our as a KB in our Cullen resource center. If you search WebTrac, app or cockpit, you'll find that there's an image guide in there that gives you the image size for the background image. And then all the different elements have their own individual size and aspect ratio are listed here in this KB.
00:02:23:17 - 00:02:45:08
Brian Hatch
So it's a great resource for the individual is going to be creating these images again externally from the cockpit. If I switch back, I can click on the background image icon and this gives me an option to actually upload an image if I haven't already, or I can browse out or drag in files to be uploaded. I've already have a couple of images that I've already uploaded, so those are showing up.
00:02:45:11 - 00:03:07:04
Brian Hatch
Under my background images and I can highlight. In this case, I'm on the welcome screen of the home screen, so I'm going to use my welcome background, the little thumbnail or display there, and then it will show in the preview screen after you click on the save option in the top right of the screen, updated the background image on one of my layers, my switch activities, for example.
00:03:07:04 - 00:03:30:09
Brian Hatch
I can walk that same process now. Excuse me a second background image there. Apply that and then hit save. And I have two background images now set on two separate layers within the cockpit. Once you've got a background image set, you likely want to set some different screen elements, sort of add screen elements or tiles or buttons however you want refer to those.
00:03:30:09 - 00:03:55:28
Brian Hatch
There is a little plus icon at the bottom of the preview panel and hover over it. It says Add the layout elements. I want to click on that and this is where you can pick and choose from this preset element list. So the banner one per row, two, three, four columns are all going to be an option. In my example, I'm just going to put down a couple of different banner options to take up space here within our preview panel.
00:03:55:28 - 00:04:19:06
Brian Hatch
So I'm really adding these as placeholders. In my example, some add in one large one and then maybe I'll do a1c and then I'll do another one C, And then just to give us something different allowed in a three column of three C, notice I built those from the top down. At this point you can see these different elements are listed.
00:04:19:06 - 00:04:36:08
Brian Hatch
You can delete if you made a mistake, move them up or down as needed, but you build from the top down by default. Now that I've set some different elements on this, the preview screen, I'm going to click on one of them. You'll notice that populates the right hand side of the screen. There's always going to be an open module option.
00:04:36:08 - 00:04:52:25
Brian Hatch
So that's the action linked to the individual module. It defaults to open nothing. I want to leave that as is for now, and the two options below here that I'm going to be setting on most of these is going to be the option to link an image just like we did on the background of the screen and the option to set transparency.
00:04:52:25 - 00:05:15:13
Brian Hatch
So it's not 100% right now. I'm actually going to set that to zero. And you'll notice if I see that the background image now is able to display, it's going to go down through really in all the different elements I've added and just initially set them to zero to allow myself to then plug in some background images. So now you can see my background image is able to display.
00:05:15:13 - 00:05:39:25
Brian Hatch
And these are again really just placeholders in my example. And then I'll set my third box down here to be an actual icon or button. And he set that to have an image that'll bring me to my programs or activities, layer or screen. So I'm going to set that background image. I've already set the transparency to zero and I'll just hit save and that'll update here in the preview panel.
00:05:39:27 - 00:06:13:27
Brian Hatch
And then below there, I'm actually going to walk through the same process. I've three different buttons, so I'm going to set three common uses for these. So, so social media is very common for somewhere on your home screen. It's also a Facebook option for an image. And I'll save that with a clear background. I'll set a my account option, then clearing out the background, and then we'll do another social of Instagram, clearing out the background.
00:06:13:29 - 00:06:33:17
Brian Hatch
It's now got a screen essentially built out with some key options that hopefully highlight the process for building screens and building elements on those screens. We'll focus in a separate video on the modular aspects of these. So how do you get these to, you know, link to other screens and how do you get them to open up in different areas within the app?
00:06:33:17 - 00:07:00:25
Brian Hatch
And then externally, what I can do at this point I've built out and saved this initial layer is I'm just going to resize my window here and actually have the app open on my phone. So if you're going through the process of onboarding, your site will be listed underneath the WebTrac app. So you can search the web, the App store for WebTrac and you should be able to find this and download this to your mobile device.
00:07:00:27 - 00:07:26:06
Brian Hatch
If I go to click on the app by default, it opens up to our sales demo of the WebTrac app. So you can see what that looks like to find your individual account. You can go to the little menu in the top left. It's always going to show your most recent accounts listed here, but you can go to my clubs and again, you can search on the bottom right, or maybe on the top right, depending on your device.
00:07:26:08 - 00:07:53:05
Brian Hatch
But then you can type in your account name here in the top to find that. So I'm actually working from my implementation database, so I'll just type in the implementation There we go and when I select that, it's now going to be listed as listed as the recent sort of easy to access moving forward. It'll default to the last club you were in and you could see I can.
00:07:53:07 - 00:08:17:00
Brian Hatch
Changes I made in the cockpit are instantly available here in the app. So you as you make changes within the cockpit, you can simply, you know, pull down or refresh within your device and you'll see those changes more or less within a few seconds after sitting them on the left hand side of the screen. So this is a walk through of the process of adding screens and screen elements within the WebTrac app cockpit.