Skip to main content
Product ToursVideo EmbedOnboardingUser EngagementNo-Code

Embedding Video in Beacon Tours: Show, Don't Just Tell

Sometimes a screenshot just won't cut it. Learn exactly how and when to embed video into your Beacon product tours, covering everything from YouTube to Loom clips, to make your guidance crystal clear.

Engineering Team·

When you're trying to explain a complex workflow, show a new UI element in action, or demonstrate a tricky sequence of clicks, words and static images often fall short. You know the feeling: you've painstakingly written out every instruction, added screenshots, and still, users get lost. That's when I reach for video.

Video, when used thoughtfully, cuts through that confusion like nothing else. It provides context, shows movement, and often answers questions before they're even fully formed. At Beacon, we've made it simple to drop videos directly into your tours, whether you're building onboarding for your own SaaS product or guiding staff through a critical CRM process on Salesforce.

Why Video? The Case for Dynamic Demos

Think about it: how many times have you watched a quick video tutorial on YouTube to figure out a new software feature or troubleshoot a problem? Probably a lot. That's because video speaks a different language. It offers:

  • Clarity on motion: You can show a drag-and-drop action, a menu expanding, or a specific animation that's impossible to convey with static text.
  • Reduced cognitive load: Instead of reading and mentally mapping instructions to an interface, users can just watch and mirror. This is especially powerful for visual learners.
  • Better retention: Dynamic content is often more engaging and memorable than passive reading.
  • Accessibility: For some users, watching an action is much easier than reading a long description, especially when combined with captions or a transcript.

Now, I'm not saying every step needs a video. Far from it. An overuse of video can slow things down and frustrate users who just want to click through. The trick is to identify those critical moments where a video step delivers disproportionate value – usually, the points where users historically get stuck or where the action is inherently dynamic.

Adding a Video Step in Beacon: The Quick How-To

Adding a video to your Beacon tour is straightforward, regardless of whether you're using the Dashboard or the Chrome Extension for authoring. The video step type is designed to be plug-and-play with most popular video hosting services.

Here’s how I do it:

  1. Open your Tour Builder: Head to your Beacon Dashboard, select the project and tour you're working on, or launch the Beacon Chrome Extension on your target site (say, HubSpot or your own application).

  2. Add a New Step: Locate the position in your tour where the video makes sense. Click the "Add Step" button. You'll see a list of step types available.

  3. Select 'Video': From the step type options, choose video. This will create a new step specifically configured for embedding media.

  4. Paste Your Video URL: In the step's settings panel, you'll find a field for the video URL. This is where you'll drop the shareable link from your video hosting service. Beacon supports popular platforms like:

    • YouTube
    • Loom
    • Vimeo
    • Wistia
    • And generally, any service that provides a standard embeddable video URL.

    Pro tip: Always grab the shareable URL, not necessarily the <iframe> embed code. Beacon handles the embedding part for you. If you're using a private video, make sure its sharing settings allow embedding or public access, depending on your needs.

  5. Configure Step Details (Optional but Recommended):

    • Title and Body: Even with a video, a concise title and a short explanation in the body text are super helpful. Remind users why they're watching this video and what they should pay attention to.
    • Placement and Styling: Unlike a tooltip or spotlight that anchors to an element, a video step typically appears as a floating modal or popover, letting the video take center stage. You can customize its size and appearance via the per-step CSS override if you want to get fancy, but the defaults are usually quite good.
    • CTA Button: Consider adding a call-to-action button to guide users after they've watched the video. Maybe it's "Continue" to the next step, or "Practice this yourself" if the video demonstrates a skill.
  6. Preview and Publish: Always preview your tour to ensure the video loads correctly and looks good. Once you're happy, publish the tour, and your users will now have that rich video guidance at their fingertips.

Practical Tips for Effective Video Integration

Integrating video isn't just about pasting a URL; it's about strategic use. Here are a few things I've learned:

  • Keep it Short: This is my number one rule. A tour video should rarely be longer than 30-60 seconds. If it's longer, it's probably trying to do too much. Break complex topics into multiple shorter videos across different steps, or consider if a full knowledge base article is a better home for it.
  • Focus on One Concept: Each video should have a single, clear objective. "How to create a new user account" is good. "How to create a new user account, manage permissions, and set up SSO" is too much.
  • Consider Audio: If your video relies on audio narration, ensure your users are in an environment where they can listen. Always add captions or a transcript where possible for accessibility. Alternatively, use Beacon's tts (text-to-speech) step for critical instructions alongside your video.
  • Mind the Load Time: Longer videos mean larger file sizes. While modern hosting services handle streaming well, be mindful of your users' internet speeds. Optimize your video quality for web delivery. No one wants to wait for a spinning wheel.
  • When Not to Use Video: Don't use video for simple clicks or static information. A tooltip or spotlight is far more efficient for highlighting an interface element or giving a short instruction. Video is a high-impact tool; save it for high-impact situations.

Beyond Simple Embedding: Staff Training & Compliance

One area where video-enhanced tours really shine is internal staff training. Imagine onboarding a new sales rep to a complex CRM like SAP. Instead of just showing screenshots of a form, you can embed a short video demonstrating exactly how to navigate tricky menus, auto-fill common fields with the autofill step, and submit a new deal. Beacon's compliance reporting means you get immutable evidence that they watched and completed the training, which is invaluable for ISO 27001 or SOC 2 audits.

We even use video internally sometimes to demonstrate how new features work or to explain tricky code snippets. It's not just for external users; anyone who needs to understand a process benefits from a visual aid.

Adding video to your product tours is a powerful way to enhance clarity, engagement, and user comprehension. It's a strategic decision that, when executed well, can significantly reduce support tickets and accelerate feature adoption. The next time you find yourself writing a paragraph of instructions that feels clunky, consider if a short video clip would do the job better.

Ready to elevate your product tours with dynamic video? It takes just a few clicks.

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

Try DoBeacon free

Add guided tours to any website in under 5 minutes. No annual contract, no per-MAU pricing.

Get started free →