Introducing Guide Creator: Step-by-Step Guides from Screenshots

Hi everyone, this is Adam from HubSpot and I'm here to show you our newest tool for growing businesses. Guide Creator. So Guide Creator is a new Chrome extension that allows you to capture step by step guides with screenshots as you complete different tasks on web pages or in web applications that you may want to document for your business. So this is great if you need to create like a product demo for your prospects, or a knowledge based guide for your customers, or even just for internal documentation for your employees. Guide Creator makes it really easy to capture great looking guides with screenshots and descriptions that you can then easily turn around and share with a broader audience. So to get started and to show you what I mean, let's go ahead and add the extension and we'll walk through one example here. I'm going to start off on the HubSpot.com guide creator page and I'll go ahead and click to get the free extension. This is going to take me into the Guide Creator extension page on the Chrome Web Store and from here I can choose to add this extension to my Chrome browser. Now, in my case, I've already added Guide Creator to my Chrome. So once you click this button here, you'll see the option to add from right here. Once you've installed, the very first thing you're going to want to do is go up to the Puzzle Piece icon in your web browser, click on that, and then find Guide Creator and make sure that you pin that extension to your browser so that you have access to the tool, any web page that you're on when you're navigating around the web. For our demonstration purposes, we're going to use HubSpot as a system that we want to create documentation for, but you can create documentation for any system that your business uses or manages. So if you use Asana or Jira or Notion, you can create documentation for those tools. Or if you create your own software, you can create a guide with Guide Creator for those tools as well. Guide Creator will work on any application as long as it runs inside of a web browser. So for our example, we're going to create a guide that shows how to update the owner on a company record in a HubSpot account. To get started, I'm going to go up to the top right here. I'll click on the Guide Creator icon and I'll choose Start Capturing. Guy Creator is going to let me know that the capture has started. And now Guy Creator is capturing every interaction that I have with this webpage and taking a screenshot so if I click on something, Guide Creator is going to register that, click, take a screenshot, and put that into the guide at the very end. So I'm going to go ahead and complete the task that I want to document. So I'm going to go up here to Contacts, click Company. I'll click on a company record here, and I'll go ahead and I'll update the owner. I'm just going to say this company no longer has an owner, and I'll go ahead and save that record. Now, one thing you'll notice that you haven't seen before in HubSpot is we now have this new toolbar down the bottom that has some additional information about the capture that we're doing with Guide Creator. The very first thing that we're going to notice is Guide Creator has a number here to indicate the number of steps that we've captured so far. So we've captured seven steps, and from here, I can also pause the capture. If I need to maybe go quickly look something up in another tab and come back to my capture, I can pause without capturing those additional steps. I can also take a static screenshot. So if I want to capture something that's on screen, but I don't want to click anywhere, I can take a screenshot. I can also restart the capture or I can delete the captures. In our case, we're done with our capture. So I'm going to go ahead and click on the big orange check mark, and that is going to open a new tab where I can see my completed guide. Now, we're not totally done here. This is the editing view for my guide. If I want to, I can go in here and do some additional editing, which we will. But first of all, let's just take a look at what we've created here. So we have a guide with different steps. Each step is numbered, and we can see exactly where we're clicking inside of each of these web pages. So you can see I navigated to the prospecting page in HubSpot. I clicked on that particular tab, and then I started with the actual tasks that I wanted to document. I started to click the dropdown, and I clicked into some additional sections here, clicked on companies, and I captured some data, changed that drop down, and then again, you can see that I clicked save here in the sidebar. We can keep track of where we are in our guide. So as I scroll up and down, we can kind of keep track of how far along we are in the guide. If I want to edit this Guide a little bit. I can change some information. So I'm going to go ahead and edit the guide title. So let's say how to update an owner in HubSpot. I could, if I wanted to add a description for this guide as well. I can also update the guide or, sorry, the title and the description for each one of my steps here too. So if I wanted to, let's scroll down to this one, say click on Contacts. I can edit the title here and say click on the Contacts dropdown for my images. I can also zoom in and zoom out if I want to focus a little bit more on the UI element that I want to highlight. Finally, I can also reorder and delete steps. So at the very beginning, as you probably saw there, I was doing some kind of random clicking around. I don't really need these steps anymore. So I'm going to go ahead and delete this step and I'll delete this step as well if I wanted to. I could also reorder and I can drag and put this and make this the first step. So I can also reorder my guide as well. Once I'm satisfied with the way that everything looks, I can go ahead and publish this guide. So in the top right hand corner here, I have the ability to publish and share. If this is your first time using Guide Creator, this button is going to prompt you to sign up for a Guide Creator account before you can save your guide. Once you sign up, you'll see this ability to publish. And when I click on that, I have a couple of different options here. First of all, I can share this guide privately with anybody within my organization, and that's going to have some. A little bit of additional security, particularly if I'm creating guides with any sensitive information in it. But in our case, I just want this to be a public guide available to anybody in the Internet. So I'm going to say anybody with a link and see this particular guide, I'll click on Publish and then I'm taken to my Publish guide. I click on the link here, I can see exactly what that guide looks like. And again, I can see the guide just as I created, highlighting different elements that I was clicking on. All right, that's Guide Creator. We're very excited to introduce this and it is available to everybody for free down in the description. Thanks everyone. See you next time.