If you know Tourial, you know that we’ve been specializing in media demos for a while now. Being able to combine image-based screenshots with video has proven to work well for a lot of tech companies because it highlights the deep functionality that their products offer.
But many customers have expressed the need for a more realistic approach to their end user demo experiences. Something that lets their visitors touch the app and get a little closer to that free trial experience.
After a few months of engineering work and testing, we’re officially releasing our new product: HTML demos.
HTML demos are exactly what they sound like. Rather than using image/video based assets to build your interactive demo, HTML demos grab the front-end code from your application’s page and create it based on the HTML and CSS that your app is built on. This means that your demos can now feel closer to the real thing but retaining the hover effects and user scrolling of your app.
The real question is: When do you use one over the other? We have all that covered here in this article.
The next question is: How do HTML demos compare to Media demos when building them?
Let’s start by looking at “What’s new in HTML demos that’s not included in media demos”
- Auto Tooltip placement (coming to media soon)
- Mobile tours are automatically built
- Blur text
- Edit text
- Delete / hide elements
- Swap images
Next, let’s look at “What’s not included in HTML demos that is included in media demos”
- Tools: Spotlight, click zone, gated forms, hotspot hovers, top navigation bar (coming in Q2)
- Implementation: Tour Page (coming in Q2)
- Personalization: Branching / choose your adventure
- Zoom (does not work with HTML)
Will HTML work for your product?
Not every product will successfully work with HTML. A lot of apps are built with very complex code that make it difficult to capture their product or their app is not web-based (ie. natively installed onto computer). This will also not work for mobile apps, just web-based desktop. Always test your experiences before going live!
We're excited to keep innovating and expanding on HTML demos so that you can expand on your ability to provide the best interactive demo experiences for your audience.