More and more companies are incorporating Interactive Product Demos into their marketing and sales motions to better educate buyers. And it's easy to understand why — because buyers don't want to be told about how great your product is and all the features it has. They need to see and feel how it works and how it can solve their pain points.
Interactive Product Demos enable companies to showcase value early on, and give prospects an engaging way to learn about your product — leading to better quality conversions and even accelerated sales cycles.
When building an interactive demo, there are two ways you can build them: code-based (HTML/CSS) and media-based (screenshot/video). They are similar in that they show your product in an interactive format, but different in how they represent your product. Deciding between the two may simply come down to preference (and that’s fine!). Below, we'll talk about when it makes sense to use each so you can keep this in mind when you go to build your next interactive demo.
When to use HTML demos
- You want people to literally feel and experience the front end of your product.
- You want to preserve the hover states and scrollability so that prospects feel like they are inside your application (even though buttons won't work).
- You want to edit the text or data on the screen.
When to use screenshots and video demos
- When you want to keep someone on a fixed path — you don’t want them to get distracted by scrolling through other parts of your app.
- You have Figma files or other mockups of a product that isn’t live yet and want to create an interactive demo to preview it.
- You have a mobile app, native application, Chrome extension, or anything that isn't SaaS (web-based) in which images are the only way to create the demos.
- You are super protective of your front-end codebase and don’t want competitors pulling your code.
- You want to show off a feature in action or something processing in app. Maybe it’s showing a series of clicks, typing, dragging and dropping, data loading, anything that involves a live look at something happening.
When/where do you use each type of demo on your website?
- If you want to use a smaller container where code may not fit in well due to responsiveness, use a media-based product demo.
- If you want to display your demo in a larger container that highlights a more realistic view into your app, use a code-based demo.
When/where should you use each type of demo for sales?
- When sending interactive demos to prospects, we suggest sending code-based demos to the users of your product because they are the ones that actually want to feel/touch it. Non-users (often DMs and other stakeholders) will do better when receiving screenshots and video so they can’t get distracted and there are limited clicks so they can consume the info quicker.