Guides
Product Demos
Screencast
Elevenlabs
Featured

Crafting Stunning Product Demos: A Guide to Using Screencast & Elevenlabs

Discover the art of crafting standout demos using Screen Studio & ElevenLabs. This guide delves deep into effective narration, engaging visuals, and savvy Next.js video embedding techniques. Merge technology and creativity for a compelling showcase of your product.

Felix Vemmer
Felix Vemmer
September 2, 2023
Crafting Stunning Product Demos: A Guide to Using Screencast & Elevenlabs

In today's digital world, captivating your audience is no longer a luxury, but a necessity. And if you're in the SaaS industry, you know just how vital a compelling product demo can be to showcase the full potential of your solution. At my SaaS BacklinkGPT.com, the platform offers a solution for effortless link building. But, how do I convey the power of my software in just a few minutes?

The answer lies in crafting a mesmerizing product demo:

With tools like Chat GPTScreen Studio and Elevenlabs at our disposal, I have been able to create an immersive experience for our viewers. In this blog post, I'll walk you through the steps I took to bring BacklinkGPT's capabilities to life and how you can do the same for your product.

Making Product Demos Easy: Spotlight on Screen Studio & Eleven Labs

Screen Studio Landing Page

Screen Studio is a standout screen recorder for macOS. Designed for user ease, it allows creation of high-quality videos without editing skills. Features include automatic and manual zooms, professional video effects, and brand customization. With a simple pay-once licensing and glowing reviews, it's fast becoming the top choice for impactful screen recordings.

Elevenlabs Landing Page

Eleven Labs: It's a top tool for turning text into speech. Made for everyone, it lets you create clear voice clips without being an expert. You can pick from many voices and languages. We care about using AI safely. With great feedback from users, Eleven Labs is quickly becoming the favorite for high-quality voice output.

Screen Studio to Eleven Labs: My Quest for Flawless Audio Narration

Starting with Screen Studio was a wild adventure. My voice? Full of "uhhs" and "umms". Reading from a script? Super tricky. Talking and clicking at once? Almost impossible. I hit "record" so many times. Let's just say my bloopers reel is longer than the actual content. Who knew voiceovers could be such a comedy show?

Even with all the hiccups, I had to deliver something. So, I put out a version I was kinda okay with. But, every time I heard my voice and those pesky filler words, it just didn’t sit right. Honestly, it didn't scream "professional" to me.

Discovering ElevenLabs: Inspired by Tweets and Trusted Friends

One day, while scrolling through Twitter, I stumbled upon a tweet from Guillermo, the CEO of Vercel. The video he shared was slick and professional. But what truly caught my attention was the voice quality. It was astonishingly clear and lifelike.

But it wasn't until I chatted with my friends Mike and Dennis from Scio Labs that I truly understood how achievable this was. They too had harnessed the power of ElevenLabs to craft a tutorial video on staking for Aleph Zero. Their results? Equally impressive and professional. The potential was clear: with ElevenLabs, anyone could produce top-notch audio content without the usual hurdles.

Here's how you can craft your own stellar product demo, let's dive in.

Crafting a Stellar Product Demo: A Step-by-Step Guide

Let's break down each step, ensuring you have all the tools to produce a captivating demo:

  1. Generate Voice Over Scripts - The blueprint of your demo.
  2. Find a Voice & Produce Audio Files - Giving life to your script.
  3. Play Audio & Record Video - The magic moment where visuals and voice unite.

Step 1: Partnering with ChatGPT: Crafting Your Voice-Over Script for Clarity

I began by prompting ChatGPT with:

Help me write a video script for a SaaS Tool called "BacklinkGPT".
Here's the copy of the landing page. Simply Acknowledge with "ok":

{COPY PASTE LANDING PAGE CONTENT}

In response, ChatGPT provided a voice-over script, but I needed just the plain text for narration. So, I requested:

Ok can you just give the tne narrator V.O. so I can copy it into a tool.

As I considered my project further, it became clear that segmenting the video into different parts would be beneficial—like "Create a Campaign," "Find Backlink Prospects," and "Generate Outreach Messages." So, I decided to modify the script for a product demo, split into a sequence of four videos:

Ok actually I wanna adjust the script a bit and do it for a product demo.

The videos will be split in a sequence of 3 steps.

Ready for the steps?
Step 1: Creating a Backlink Campaign

A Backlink Outreach Campaign helps you promote your content by reaching out to potential backlink prospects.

Action: Button Create new Campaign

Input the URL of your webpage for which you want to aquire backlinks.

In the background we will scrape the target website to understand the content and Our AI will analyze the content and provide a summary of the webpage, a category for the website and extract the most important keywords

We can always manually define the summary if we want to adjust it, select another category or also change up or create new keyword.

In the next video we will start finding backlink prospects.

And with just like this I got a good first draft that I could further edit.

Step 2: Finding Your Ideal Voice: Producing Premium Audio Files with ElevenLabs

Navigating through the vast array of choices in the ElevenLabs voice library feels a bit like being a kid in a candy store. There's a voice for nearly every mood, message, and medium. After much exploration and experimentation, I finally found "the one."

Meet Natasha: a young American female voice that's described as a 'valley girl'. Now, the word "valley" immediately made me think of Silicon Valley (because why wouldn't a tech enthusiast's mind go there?). But there was more to it than just the name. What really sealed the deal for me was how incredibly natural Natasha sounded.

Eleven Labs Editor

Simply copy your desired text, hit the 'generate' button, and download your audio file. It's as straightforward as it sounds.

Step 3: Syncing Sound with Sight – Recording the Video

On my Dell UltraSharp 40" WUHD Monitor, I strategically placed Apple Music to one side and, right next to it, a browser window exclusively opened to record BacklinkGPT.com. This setup was crucial for the perfect demo recording.

Before diving into the action, I made two crucial adjustments on Screen Studio:

  1. Audio Capture: I set it to record audio directly from the system. This ensured that, when I played Natasha's voiceover from ElevenLabs via iTunes, her voice would be perfectly audible in the recording.
Audio Catpure Screen Studio
  1. Screen Dimension: I adjusted the screen size to match YouTube's ideal video dimensions, ensuring an optimal viewing experience.

Once ready, I hit the record button on Screen Studio and allowed a few seconds of silence. Then, I played the ElevenLabs voice audio and synchronously carried out the actions as Natasha narrated. Everything was flowing seamlessly!

Bonus Tip: Embedding YouTube Videos in Next.js the Smart Way

Embedding videos without hampering page performance can be a bit tricky. But, if you're on Next.js, I've got a nifty trick up my sleeve. I used the package react-lite-youtube-embed, which offers a lightweight solution to embed YouTube videos without the usual iframe pitfalls.

Here's how I set it up:

'use client'
 
import React from 'react'
import LiteYouTubeEmbed from 'react-lite-youtube-embed'
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 
export default function YoutubeEmbeddedVideo({ videoId }: { videoId: string }) {
  return (
    <LiteYouTubeEmbed
      thumbnail="https://www.backlinkgpt.com/logo/video-cover.png"
      poster="maxresdefault"
      id={videoId}
      playlist={true}
      title="BacklinkGPT Product Demo"
    />
  )
}

One thing I particularly liked was the ability to set a custom poster image. This not only gave my embed a cleaner look but also kept it on-brand with the rest of my site:

Clean YouTube Embed with react-lite-youtube-embed

Wrapping Things Up

Creating a top-tier product demo isn't just about showcasing the best features of your tool; it's also about the presentation. With the right voice, a clear script, and a reliable screen recording tool, you can make magic happen. My journey had its hiccups, but tools like ElevenLabs and Screen Studio, combined with some handy Next.js embedding techniques, made the process smoother. So, whether you're diving into creating a demo for the first time or you're looking to up your current game, remember: the best results come from a blend of tech and creativity. Dive in, experiment, and let your product shine!