Boost Sales Productivity: Train Your Team Inside HubSpot with Beacon's No-Code Tours

You've just hired three new SDRs. They need to create a new contact in HubSpot, log a call, and move the deal stage from 'New' to 'Qualified Lead' by EOD. Traditionally, this means hours of recorded video, endless Loom links, or a daunting PDF SOP that nobody reads.

But what if you could put them directly into HubSpot, show them exactly where to click, what to type, and what to expect, all without writing a single line of code or getting an engineer involved? That's exactly what Beacon's Chrome Extension lets you do. We're going to build a simple tour that walks a new sales rep through creating a new contact in HubSpot, making them productive fast.

The Challenge with External Training Tools

Internal tool training often falls into a few traps. You either build custom in-app guides (expensive, slow, dev-reliant) or you resort to static documents and videos (low engagement, quickly outdated). For critical tools like HubSpot, where every click can impact revenue, 'just figure it out' isn't an option. Moreover, you don't own HubSpot's codebase, so direct integrations are out of the question for most teams.

This is where Beacon shines. It allows you to overlay interactive guidance directly on any web application, including third-party SaaS tools like HubSpot, Salesforce, or SAP. Your team learns by doing, in the actual environment they'll use every day.

Step 1: Install the Beacon Chrome Extension

First things first, you need the tool. Head over to the Chrome Web Store and install the Beacon Chrome Extension. This is the magic key that lets you build and play tours directly on your live HubSpot instance. Once installed, log into your Beacon dashboard or sign up for a free account if you haven't already. You'll need a project key, which you can find or create in your dashboard.

With the extension installed and logged in, you'll see the Beacon icon in your browser's toolbar. Click it and toggle the 'Builder' mode on when you're on a HubSpot page. A purple bar will appear at the top, indicating you're ready to start authoring.

Step 2: Start Building Your HubSpot Tour

Navigate to the HubSpot page where you want your tour to begin – in our case, the main 'Contacts' view. Click the Beacon extension icon, ensure Builder Mode is on, and then click 'New Tour' from the purple bar. Give your tour a clear, descriptive name like "How to Create a New Contact (HubSpot)" and hit 'Create'.

Now, the fun begins. The visual builder lets you interact with HubSpot as if you were a user. Your goal is to guide them through the process of adding a new contact.

1. First Step: Click "Create Contact"Your first step needs to point the user to the "Create Contact" button. With the builder active, hover your mouse over the "Create contact" button in HubSpot. Beacon's element picker will highlight it, showing you the detected CSS selector. Click it. A tooltip step will pop up. Add a title like "Start Here: Create New Contact" and a body explaining what this button does. You might also want to change the step type to clickwait so the tour pauses until the user actually clicks the button.

2. Second Step: Fill in Contact DetailsOnce the user clicks "Create contact," HubSpot will likely open a new form or modal. This is where you'll guide them to fill in the essential details. You can use a tooltip to highlight the "First name" field, prompting them to enter the name. Then, use an autofill step to pre-populate the "Last name" or "Email" field with dummy data for demonstration, or just provide instructions. I find autofill steps incredibly useful for speeding up training flows where you don't need real data, just the action of filling.

3. Third Step: Saving the ContactFinally, guide them to the "Create contact" button within the modal. Again, a clickwait step here is often best, ensuring they complete the action. You can add a modal step afterward to give them a "Success!" message.

What I appreciate about building this way is that you're interacting with the real HubSpot application. There's no guesswork about what will pop up or how the elements are structured. You see it, you click it, Beacon captures it. This direct interaction makes for much more robust tours than trying to simulate or guess at the DOM.

Step 3: Publish and Assign for Staff Training

Once you've built out your tour in the Chrome Extension, save it. It'll automatically sync back to your Beacon dashboard. Here's where the staff training features kick in.

In the dashboard, you can:

• Review and Refine: Edit step content, add entrance animations, or apply per-step CSS if you're feeling fancy.
• Publish: Change the tour's status from 'Draft' to 'Published'.
• Assign to Your Sales Team: Go to the 'Staff Training' section. You can assign this "How to Create a New Contact" tour directly to individual sales reps, set a due date, and track their progress. Better yet, create a 'Sales Onboarding' course and add this tour as a prerequisite. When new team members join your 'Sales' group, they can automatically be enrolled.

Step 4: Track Compliance and Completion

With Beacon, you're not just hoping your team learned it; you have proof. The analytics dashboard shows you completion rates for each tour. For compliance-sensitive workflows, Beacon's staff training assignments are immutable. This means once a rep completes a tour, the record of their completion—who, what, when, and which version—is locked down. You get auditor-ready evidence for ISO 27001 or SOC 2 reviews, demonstrating that your team has been trained on critical processes.

Imagine combining this with Beacon's AI generation: upload your existing HubSpot SOPs, have Beacon draft the steps, then refine and publish. You go from static document to interactive, trackable training in a fraction of the time.

Training your sales team to be HubSpot experts doesn't have to be an uphill battle. By using Beacon to build interactive tours directly on your live HubSpot instance, you empower your team with self-service learning, ensure consistent process adherence, and get the compliance evidence you need. It's a win-win: faster onboarding for your reps, better data for your business, and less stress for your enablement team.

Start building your first HubSpot tour for free today. Build your first tour for free at https://dobeacon.com/signup