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.
On this Page
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 GPT, Screen 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.
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.
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.
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.
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.
Let's break down each step, ensuring you have all the tools to produce a captivating demo:
I began by prompting ChatGPT with:
In response, ChatGPT provided a voice-over script, but I needed just the plain text for narration. So, I requested:
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:
And with just like this I got a good first draft that I could further edit.
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.
Simply copy your desired text, hit the 'generate' button, and download your audio file. It's as straightforward as it sounds.
If you feel the voice needs more pauses, try breaking your sentences into separate paragraphs. Also, be attentive to tricky words. For instance, I had to swap out "Analyze" since Natasha had a tiny hiccup pronouncing it. 😅
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:
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!
Always ensure the cursor is positioned where the action is happening. For instance, if you're aiming to showcase a loading spinner in a zoomed-in state, remember to move the cursor to the top right corner. This way, you can smoothly zoom in on those specific notifications later. Positioning is key!
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:
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:
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!
This voiceover was generated by @elevenlabs AI. No editing 🤯
We're excited to share a major feature addition to Family: Previews. Enabled by our collaboration with @blowfishxyz, Previews offers an unprecedented level of control and transparency when navigating the world of Ethereum, with full transaction simulation and much more. ⚡️🐡
