Create Your Own Interactive Product Demos With Demoquick

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.

Chrome extension

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.

Technology stack

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.