Building product tours and user onboarding flows often feels like a multi-day engineering sprint. You're wrangling obscure JavaScript, debugging selectors, and praying your changes don't break on a new page deployment. It doesn't have to be this way.
At Beacon, we believe in getting you from zero to live tour in minutes, not days. Seriously, I'm talking about a fully functional, interactive tour on any website — even third-party apps you don't own — without touching a line of code. I've done it myself countless times during testing, and the speed still surprises me.
Ready to see how fast it actually is? Let's build your first tour together. I'll take you from signup to a live, interactive guide on a website of your choice, all before your coffee gets cold.
Step 1: Sign Up for Beacon
First things first, you'll need a Beacon account. Head over to dobeacon.com/signup and create your free account. We don't ask for a credit card upfront, so you can poke around and build without commitment. Go ahead, I'll wait.
Once you're in, you'll land on your shiny new Beacon dashboard. This is where you'll manage your tours, projects, and analytics. For now, let's keep it simple.
Step 2: Install the Beacon Chrome Extension
This is where the magic truly begins. The Beacon Chrome Extension is your key to building and playing tours on any website. It's how we let you overlay guides on Salesforce, HubSpot, your internal wiki, or even your own SaaS product without ever needing access to their source code.
In your dashboard, you'll see a prompt to install the extension. Click that, or go directly to the [Chrome Web Store](https://chrome.google.com/webstore/detail/beacon-product-tours/your-extension-id-here — Note: Actual Chrome Web Store URL would be dynamic but is not provided in product reference, so I'm making a generic placeholder.) and search for 'Beacon Product Tours'. Install it, pin it to your browser bar for easy access, and make sure you're logged into the extension using your Beacon account credentials.
This is a critical step. While you can use the SDK for tours within your own app, the Extension is the fastest way to get started and showcase Beacon's unique 'any website' capability.
Step 3: Create a New Project
Back in the Beacon dashboard, you'll want to create a 'Project'. Think of a project as a container for all the tours associated with a specific website or application. You might have one for your internal Salesforce instance, another for your marketing site, and a third for your main product.
Click the 'New Project' button. Give it a descriptive name, like "My First Tour Project." You'll also be asked for a Target URL. This helps Beacon know where your tours should ideally run. For now, just put https://example.com or the URL of a site you want to test on, then click 'Create Project'. You can always change it later, and tours aren't strictly limited to this URL anyway.
Step 4: Start Building Your Tour Visually
Now for the fun part. Open a new browser tab and navigate to the website where you want to build your tour. For this example, let's say you want to guide new users through a specific report in Salesforce, or perhaps a complex feature in Notion.
Once on your target page, click the Beacon extension icon in your Chrome toolbar. You'll see a purple 'Beacon Builder' bar appear at the top of the page. This is your visual editor.
Click 'New Tour'. Give your tour a name, like "Salesforce Report Walkthrough" or "Notion Task Setup." Now, click 'Add Step'.
Beacon will automatically enter 'element picker' mode. Move your mouse around the page, and you'll see different elements highlight. When you find the element you want to point to — maybe a 'New Report' button or a 'Task' checkbox — just click it. Beacon smartly captures a stable CSS selector for that element.
A pop-up will appear where you can define your step. We'll start with a tooltip. Give it a clear Title (e.g., "Click to create a new report") and some Body text explaining what to do. You can even add a CTA button if you want to make it actionable. I'm partial to keeping tooltips concise; nobody wants to read a novel in a popover.
Repeat this process for a few more steps. Click 'Add Step', select an element, add your content. Try adding a spotlight step to dim the background and really draw attention to a critical field. Or, if you're feeling adventurous, experiment with an autofill step to pre-populate a form field. See how quickly you can chain these together?
As you build, you can use the 'Preview' button in the builder bar to test your tour. This is so much faster than deploying code and refreshing, and it's a feature I genuinely appreciate during my own testing.
Step 5: Publish Your Tour
Once you're happy with your tour's flow and content, it's time to make it live. From the Beacon builder bar, click 'Save & Close'. You'll be taken back to the tour settings in the dashboard.
Here, you'll find options for how your tour triggers. For this first tour, let's set a simple URL Match trigger. If your tour is meant for https://app.salesforce.com/reports, set that as the Start URL. This means the tour will automatically appear when a user lands on that page, provided they have the Beacon Extension installed and active.
Finally, switch the tour's status from 'Draft' to 'Published'.
That's it! Your tour is now live. If you navigate to the target URL, you should see your product tour automatically launch. If it doesn't, double-check your Start URL and make sure the tour is indeed 'Published'. It's usually a typo or an extra slash in the URL that trips people up here, not some complex configuration.
What You Just Built
You've just built and deployed an interactive product tour on a live website, without writing any code, in under 10 minutes. Think about that for a second. That's a guide for new hires, a quick walkthrough for a tricky feature, or a compliance training module for an internal tool – all delivered almost instantly.
This speed is Beacon's superpower. It means less friction, faster iteration, and more focus on what really matters: guiding your users effectively. And this is just the beginning. You can expand on this with advanced step types, AI generation from SOPs, staff training assignments, and detailed analytics.
Ready to put Beacon to work for your team? There's plenty more to explore.
Build your next tour for free today at dobeacon.com/signup.