Create Your Own Interactive Product Demos With Demoquick
Imagine that you have a startup or a company with a ready-made IT solution or product. You need to give a potential client a demonstration of this product. The usual solution for this is to take screenshots of your project and make a presentation out of them, which will take a lot of time. You could also ask your developers to make a demo account, but first you’ll have to delete all sensitive data, personal information, payment and financial data, and so on.
But now there is a better option. You can use Demoquick, an interactive product demo software tool that allows you to create product demos using just the app or extension.
We have been working on the frontend part of the Demoquick project. When we joined the project, there was a small team of one frontend developer and two backend developers from the customer's side.
Creating interactive product demos
The Demoquick application, which we are working on as part of the customer's team, consists of two parts. We have an extension for Google Chrome and a full web application, and you use either one to create a very cool interactive demo — without the help of programmers.
All you have to do is install it and take pictures of your pages. The pictures can be simple screenshots or HTML demos (where we copy the entire page in the markup form with styles, scripts, and all other elements). From there, you can go to the application and use the built-in editor to add different widgets to these pages.
So, if you want the user to pay attention to a specific element, you can, for example, put a blinking dot there. You can also add a video or audio widget, and you can even record some kind of video greeting at the beginning of the demonstration.
The editor and widgets
There are different types of widgets — text, image, video, tooltip — and there is also the so-called lead form, where you can, either at the beginning or at the end of the demo, ask the viewer for their email address, name, etc. The demo can even be personalized in a cool way using tokens scattered across pages and widgets. For example, you can add a “first name” token and create unique links to the demo with personalized greetings for each viewer.
Developing and personalizing the solution
Before we joined the project, it was just a basic editor that made pages and allowed for two or three widgets. When we joined the project, we created personalization and text tokens that can be replaced with certain values — first name, last name, and company name. We also added picture tokens. For example, you can take an image and replace your product logo with the client’s logo everywhere, showing the client what the product will look like if they use it.
At first, the project only had HTML demos, so we also helped make picture demos. This was done so that customers could upload demos or create them from layouts, for example, in Figma. In addition, we added options for both audio and video widgets.
Product demo analytics
We also worked on an analytics dashboard for the project. For each demo, you can create and send individual links and then see in the analytics dashboard which widgets each viewer clicked, how quickly they did it, and how far they went while viewing the demo. You can also see general analytics for all demos: how many visits there were, the users’ immersion levels, how much time they spent viewing it, did they fill out the form with their data, did they click on the call-to-action button, etc.
Integrations and team management
We also participated in adding integrations, and we worked on the frontend. Demoquick can be integrated with Slack, which is used for messages and notifications. There are also integrations with Hubspot, Marketo, Salesforce, Zapier, and Intercom.
Additionally, we worked on team management and developing the project hierarchy. Currently, each user has a company to which they are attached. And within the company, there can be several teams. You can invite a person either to a company or a team and give them different rights — such as viewing only access or editing privileges.
We also built the story management system, which allows stories to be grouped into folders, copied, renamed, etc.
Developing flow lists
The greatest value of the project is definitely the editor. In the editor, we initially had only a couple of widgets. Then we made two things for the editor: flow, which is a set of widgets, and flow list. Let's say you have a product you’re selling on a marketplace, and you want to demonstrate the flow of buying it. So you scroll through the pages, screenshot them, and create a set of widgets that describes the buying process step-by-step. Then you combine this set of widgets into a flow. You can edit the demo flow; and from several flows, you can make a flow list.
So when a person opens the demo, they can choose which flow to take. They might want to go through the flow of how to buy the product, how to return the product, or how to add the product to the marketplace. These three flows are combined into one flow list, from which they choose what they want to go through.
We also worked with the Chrome browser extension, which allows you to take screenshots, create a demo, and upload it to the application. When we joined the project, there was only the functionality of saving an HTML version of a web page and then creating an HTML demo from that. We added more screenshot-demo functionality, so you can take screenshots of pages and create demos from these pictures.
Now we are working on transferring all extensions to Google Manifest V3 — a requirement of Google Chrome — and there are also plans to add the capability to record a video demo.
We worked a lot on the performance of the application, because it turned out to be quite multi-layered due to the complexity and amount of work going on with the browser API. For recording, we used a technology called rrweb, which we are also integrating it with. The web application uses React, Redux, and RTK Query. And the extension uses just React.
We also needed to use state machines, such as XState, for our demo player, as well as many small libraries. Currently, we are working on implementing end-to-end testing with the playwright to maximize visual performance.
Plans for the future
Very cool fact: we passed Y Combinator. In those days, we had a lot of releases, and we had to work at a very fast pace so as not to lose face.
Right now, we’re planning to open registration/authorization for everyone and add tariff plans. Then we will continue working to further improve the user experience and ensure that Demoquick is easy for everyone to understand and use.
We want to make it simple for a real, average person to register on the site, go through some basic onboarding, and start using it themselves. And in doing all this, we are looking to reach an annual revenue of $1,000,000 by the beginning of the year.
If you need help developing personalized product demo software or a product demo editor, leave a request in the form below, and we will contact you to discuss your project.
“Singula is a team of talented developers who helped us a lot with building the platform and Chrome extension. We appreciate their services and would definitely work with them in the future if there is such a chance.”
- CEO, Demoquick