WidgetsVirtuoLab's own demo

DataStream · Embeddable widget

Demo: an embeddable statistics widget on the dashboard of the fictional Koffiebranderij Mokum, with themes, sizes, allowed domains and an embed code.

View live demo Request a quote

Screenshot of the DataStream · Embeddable widget demo (Widgets), built by VirtuoLab

About DataStream · Embeddable widget

Type: VirtuoLab's own demo
Technologies: ReactNext.jsTypeScriptTailwind CSSSVG

DataStream is a demo by VirtuoLab of an embeddable statistics widget, shown on the web shop dashboard of Koffiebranderij Mokum, an invented coffee roaster. The page is built with React, Next.js and TypeScript and runs in Dutch, English and German. First, the widget shows today's website traffic: 1,284 visitors, 4,563 page views, a conversion rate of 1.8% and an average visit length of 3:42, each compared with yesterday. A chart shows visitors per hour over 24 hours, and a few visitors are added every 5 seconds. Second, a settings panel switches between three themes and three sizes and builds an embed code with those choices as data attributes. A list of allowed domains controls where the widget loads. For example, one embed code could place the widget on the websites of 20 customers. DataStream connects to no real analytics source, and all figures are sample data.

WidgetEmbedAnalytics

What does the DataStream demo show?

The DataStream demo is an embeddable statistics widget, built by VirtuoLab with React, Next.js and TypeScript and shown on the dashboard of the invented web shop Koffiebranderij Mokum. First, the widget shows four figures for today's website traffic: visitors, page views, conversion rate and average visit length, each with the change compared with yesterday. The starting values are 1,284 visitors, 4,563 page views, a conversion rate of 1.8% from 23 orders and a visit length of 3:42. A few visitors are added every 5 seconds. A line chart shows visitors per hour over the past 24 hours, and a list shows the 4 most viewed pages. Second, a settings panel switches between a light, dark and brand colour theme and between a compact, standard and wide size. Three switches show or hide the chart, the top pages and the comparison with yesterday. Additionally, the panel shows an embed code with the chosen settings as data attributes, plus a list of 3 allowed domains where the widget loads. The coffee roaster, its orders and all figures are sample data.

Which business problem does an embeddable widget like DataStream solve, and for whom?

An embeddable widget like DataStream solves the problem of data which lives in one system but is needed on another screen. SaaS companies, platforms with a customer portal and businesses with partner or reseller dashboards benefit most. The business places one script and one HTML element on an existing page. The widget then shows live figures in the house style of the host page, even on a website built with WordPress. Additionally, one widget can appear in many places, for example on the websites of 20 customers, while the code is maintained in one location. In practice, a widget is a cheaper first step than a complete dashboard. A business can start with the three or four figures customers request most. Security matters, too: every customer should only see figures from the customer's own account. According to OWASP, broken access control appeared in 100% of the applications tested for the OWASP Top 10:2025. Access checks therefore belong in the API, not in the widget.

How does VirtuoLab build an embeddable widget for a real business?

VirtuoLab builds an embeddable widget for a real business as a small, self-contained script with a secure API. Step 1 is a scope session about the figures, the data source and the websites which will host the widget. Step 2 is design and validation of themes and sizes, similar to the DataStream demo. Step 3 is building and testing, for example with React and TypeScript for the widget and a Node.js API with a PostgreSQL database. Script size matters on a host page: according to HTTP Archive's Web Almanac 2025, only 48% of mobile websites passed all three Core Web Vitals. In a real project, every request is checked against the account of the host site. Finally, step 4 is launch and support. As an indication, a simple web app costs €5,000 to €10,000 with a lead time of 3 to 6 weeks, and an embedded KPI dashboard €12,500 to €35,000 or more. The exact price follows after a free introductory call.