EASILY Create Onboarding Feature Tours with GuideChimp (Tutorial)

Key Takeaways

today I'm going to show you how to very quickly and easily set up guided feature tours using guide chimp everybody what's up Gary Simon here so today we're gonna be checking out something called guide chimp with which is a JavaScript library that helps you very quickly and easily set up guided feature tours or onboarding experiences for your projects so just again just show you what's happening here this is actually the project from my front-end developer crash course here earlier this year if it refresh yet somebody you know perhaps comes to your app the first time we'll see I we have this little section here where I'm highlighting the the title which doesn't really make sense but you know how it works we can see there's a progress bar down here and this is all customizable you can have custom buttons I didn't style this one but you can style it easily also you know you just attach an ID to any of your elements that you want to feature along with information and it all just works it also works responsibly so if I come down here refresh it I just works very well has this edge detection so nothing gets cut off or creates scroll bars like that so yeah it works very well and I'll be showing you guys exactly how to get this set up and running so as always make sure to subscribe and let's get started before we begin the note makes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors Linode can do that too so sign up using the link below in the description to get $20 in credit on your new alone owed account alright to get started we're gonna go ahead and check out the main page the github page for guide chimp and there's a lot of information here I'm gonna tell you what you can do with it a bunch of features which you can check out on your own time how to use ok so you can install using a CDN installing with nodejs and npm which is what we'll be doing and documentation all right so this part is important if we click here it's a little bit confusing just because there's a home button and you know you don't really see what the heck's happening in fact if you go to like these links they don't seem to really work I configure I guess well I guess that works nevermind but there's a page a section here and where I basically use to navigate around to learn more about what you can do so this is just for your reference we're not going to really be covering this stuff specifically just yet also we're going to be using parcel and this is a blazing fast zero configuration web application bundler we're gonna be using it because we're gonna be using the node package manager to install the guide chimp dependency and we're gonna use this just to simply allow us to import it alright so if you're not sure what a parcel is don't worry I'm going to show you how to install it and such it's very simple but I do have another video you could do a channel search just search for parcel and I have a more in-depth tutorial about that so we're going to do is I currently have a Visual Studio code open in a folder called guide chimp and just real quickly this is just this is the same project that I did for a recent crash course and you know nothing has here has really changed let me get rid of that that's not supposed to be there and one thing to note that there is a script source that's pointing to a file called index Jas this is where our eye JavaScript will go and it's a very light JavaScript nothing Crazy's happening so we want to create that so index Jas alright that's created and then also let's head on to the console I'm in the same folder as this project here let me increase the size so you guys can see and first I'm going to run NPM in it - why and now it's just going to create a package.json file for us because then we can go ahead and install guide chimp and so the guide ship installation if I click on here go back there NPM install guide chimp ahead and paste that and there we go we're good to go there and then what we'll do is also I you want to make sure that you install if you haven't already the parcel bundler all right so to do that npm install - g for global parcel bundler i already have that installed if not you can go ahead and run that command and then now we could just type in parcel index dot HTML and momentarily okay there we go we got this right there we can open up a browser go ahead and paste that and then there we go so we don't have our guide chimp actually working right now there's no user tour and so that's what we're gonna focus on now so you can see it is responsive and we'll definitely make sure that the guided tour will work correctly in the responsive environment all right so what we'll do now is go ahead and let me close or yeah but minimize that we'll go ahead and we'll go to our index dot HTML and we're gonna add ids specific the ID opportu attributes if I could talk specifically to the elements that we want to highlight as a part of the guided feature tour so I think going back to our example maybe we'll just highlight you know this right here and then this description of course why would you ever do that in the real world environment if you have some type of a lot of project or service people can use you'd be highlighting buttons or features or whatever but again you could just add these to anything you want and your your element I mean then we'll do this we'll highlight this form so to do that we are going to find our elements this is going to be ID equals I'm going to call it step one you can call them whatever you want this will be step two and then finally step three great so there's a few different ways especially according to the documentation in terms of how you can get up and running so I believe it's in the basic usage section you can define all the parameters as HTML attributes right here inside of your HTML or you could set it all up using javascript all right so I'm not even going to use this way because instead we can pass in an array of objects for each of your steps so I'll show you how to do that let's go to index j s and i did initially have some eye other let's see here yeah i had some other HTML or CSS rather for the project alone this has nothing to do with guide to him I'm just gonna get it added there but so wait now what we need to do is we need to import guide chimp all right so we already installed it with NPM I'm gonna import it from up there it's dimmed out because it's just telling us we haven't used it anywhere yet and now we want to create an array so we're gonna need to say all right let tor not let it toward let tor equals our array and then we'll have objects for each individual tour element I guess you could call so inside of here it accepts the element so it's gonna look for this element right here so this is going to be relation to the step line which is on that the the title portion or the header heading rather of the document title all right this will show up like in the little blip that shows up the title will be an amazing title and this one next up its description I'm gonna paste this in on off the side of my document there on the other monitor and there we go I mean that's the very basic eye setting or sets you know the way you could set it up in a very basic sense I think configure is where you want to go to find out all of the other properties that you can specify there's also methods here and there's events so it's it's you know quite well defined and dynamic and flexible I'm gonna go ahead and paste in a couple other things are a couple of other elements and just pause so you don't have to be bored or you know with all this alright so I just simply basic copy copy and paste of these they are unique titles and descriptions but it really is a step one step two step three okay we're gonna add a couple other properties as you'll see that we'll want to do but let's go ahead and run this except first we have to I add two lines first we have to create a guide chimp property alright so guide chimp new guide chimp and we're gonna pass in our tour right here and then we simply run guide chimp start method alright so we'll save that we'll go back to our document and you're gonna saw you're gonna see what where's it at well that's because we haven't imported the CSS and you can see it's just down here there's you can't use it essentially so you have to import their CSS somewhere you could either import it up here by using import and then just referencing the location of the CSS file or what I found to be better is in my sass file I'm gonna import it here at the top and then that way I can overwrite any of their rule sets so I can create custom styling on my own so to do that we're gonna come up here import guide chimp dist and then guide shipment CSS will save this and it should now hopefully work and it doesn't all right so that's because I'm not watching my sass file all right now it should hopefully work ah there we go now we have a couple issues with this notice how you know it says the healthy experience this is white text and so there by default adding this sort of live very light gray eye issue or background on it and so you can't see white text right and so that's why you can go ahead and change the CSS to your liking so oh and also the position was kind of off so we have it at the bottom here this one shows up at the top it's kind of strange and this one shows up the top I don't like that so we can also change the positioning as well so those two things we need to fix so going back to our Visual Studio code right here what we can do is we could target the specific element that we need to change before I do that real quickly we'll go back and I'll show you how you can find out which elements that you want to change so let's refresh we'll hit control shift I to get out the dev console and this is what we want to change this overlay right here I let me pull this down we can see this is called GC highlight it's a class so all we have to do is just override that and change the background to none because we could see all the CSS properties down here right here so you'll see background color is this white color right here so you could change it to whatever you want maybe black or just a nun all right so that's what we're gonna do so GC highlight background none save it come back wherever our document is and there we go so now by default it's dimming every other element out except for the one that the IR step 1 ID is applied to and then now let's get rid of that we can hit this and now it's highlighting the description next and then also this section next as well and so I it's pretty cool you could see that by default it has this little progress bar this orange area which by the way you can change that color as well you could change all this stuff and it's kind of like a progress bar that's currently 3 so you can see this about like 33 percent with next up it comes out here all the way to 66% and so it's just kind of like a visual guide for a progress bar which you can by the way also turn off in the settings all right so next up let's fixed the position I want them all to be show up beneath the elements so we will go back to our JavaScript and we will specify right after description a position will say bottom will do that for this one as well save it and now positions bottom that one was naturally at the bottom already but we added on the middle one there we go it's at the bottom and this one's at the bottom as well so let's also check out for instance if this works in a responsive manner so we can see it changes from here to there slightly of course it's gonna work here there wasn't much of a change there we go and then also it also works here and mobile very very very cool so that's not the final thing what if you wanted to add like a custom button Y or some other element here to like point them to a different page or have some other L or something else pop-up or whatever maybe like a you'll have like a video maybe they can watch a video on this specific element so what we can do is come out here and what we'll say is we're going to create a buttons array we'll do it on the middle one and side of buttons but our comma there we'll go ahead and say an object so you can have multiple buttons just to create multiple objects title we'll just say see more I don't know whatever and then we'll say we'll give it a class that way we can style the button custom if we wish and this is coming straight from their documentation by the way and then we can have on click as an event function and we open up in there then we could just put whatever you want we can console.log something to make sure it's working we could open up a new URL so we can say window open and then we'll say HTTP google.com then target --blank you know there's a million things you can do with JavaScript of course that's just one so now checking it out let's go to that middle button there it is Seymour of course this looks pretty ugly you would want to style with that class that we specified and CSS I'm not gonna do that you get the point we click it and Google comm is showing up awesome awesome easy peasy stuff now one thing I did want to mention I if we go back there is one eye one issue a lot of people aren't gonna like because nobody wants to pay money for anything but there is a licensing area so Terms of Use commercial use for open-source yeah you can do that you can have one domain if it's free if you're doing the free version you can't remove the attribution the attribution is I really small you can barely see it it says made with guide chimp right here also extensions customization and support although I did customize mine in terms of CSS Elise I'm not sure if that's breaking rules or whatever but anyhow you can start now with that or you can do a commercial unlimited domains all that stuff's unlock and one thing that's kind of annoying to me is you have to contact them with a contact form would be nice just to you know purchase it right here or whatever however they're setting this up but either way it's a it's a good project here and just makes these feature tours very easy alright so once again I hope you enjoyed this and you learn something new if you like guide chimp go ahead and use it also you can use Shepherd Jas to do the same thing I'm gonna try to remember to link that video that it did about a year or two ago on using Shepherd Jas which is 100% free alternative to guide chimp alright I'll see you guys soon goodbye