Skip to main content



This tutorial doesn’t assume any existing knowledge of the blindnet devkit or even any privacy-related technologies.

The purpose of the following tutorial is to serve as an entry point for the blindnet devkit, by simply walking you through its different components to give you a better understanding of the overall structure and logic.

Doing so, we'll answer the following questions:

  • What is the purpose of the Privacy Computation Engine;
  • How to add Privacy Requests features to your Web page or applications in a snap;
  • How to easily add privacy requests management features to your "back-office" web page or applications;
  • How to automatically update stored data when managing Privacy Requests.
Further Readings

We strongly recommend reading the linked sections of the documentation for more details.

1. Initial Configuration

The Privacy Computation Engine is the core of blindnet devkit. It is a simple service you can interact with via a Rest API to create and track your users' Privacy Requests.

Using the Privacy Computation Engine goes into three steps:

  1. App Management: register and obtain an application id;
  2. Configuration: configure the service using its configuration API;
  3. Development: call the Privacy Computation Engine from your registered application to handle Privacy Requests

Step (1) App Management and (2) Configuration don't need to be addressed for this tutorial.

Pre-configured Instance

A pre-configured custom instance of the PCE is available for you to play with and get started:

Keep in mind this instance is only here for testing and demonstration purposes, and should never be used in production.

Step (3) Development can be achieved directly by calling the standalone Privacy Computation Engine REST API.

However, the true strength of the blindnet devkit comes when combining its various components, thus drastically improving your developer experience and productivity while giving you access to additional features.

Starting with our premade user interfaces.

2. Add Privacy-Rights Management Capabilities to Your Application

User interfaces for the blindnet devkit (aka Privacy Components for the Web) are delivered as standard Web Components available on both npm and a CDN.

As a consequence, installing the blindnet devkit web interfaces doesn't involve any specificity, as you can install and use them as you would with any other standard Web Component.


See Using Web Components for more information on how to integrate Web Components in your existing project.

In the interest of simplicity and clarity, let's see how to integrate these components into a simple static HTML page, starting with the Privacy Request Capture Interface (PRCI).

PRCI is a simple interface allowing your users to assert their privacy rights by sending you a simple yet standardized Privacy Request. It is an entry point for your user to privacy, not only allowing you to cover GDPR and other privacy-related legislations but also and more importantly, to build trust by showing your users their privacy rights are tangibly handled, enforced and respected.

To integrate this interface into your web page, you'll first need to load the associated bundle (included in the @blindnet/prci npm package) from the unpkg CDN by adding a <script> tag to your HTML document:

<script src="" type="module"></script>

Here, we use the core module build for performance improvement.

As this build only integrates the core parts of the library, external dependencies like Lit will only be loaded once, even after we add other privacy components to this same web page.

Your specific context might be different. This is why each Privacy Component for the Web includes different builds and bundles covering any specific needs, as detailed in the User Interfaces - Install section.

Then, you only need to add the associated entry-point custom element <bln-priv-request> to your HTML document:

<h2 id="priv-request">Make a privacy request</h2>


Leading us to the following HTML file:

<!DOCTYPE html>
<html lang="en-GB">
<meta charset="utf-8" />
<title>Privacy Components for the Web - Minimal Static Demo</title>
<h1>Privacy Components for the Web - Minimal Static Demo</h1>

<h2>Assert Your Privacy Rights</h2>


<script src="" type="module" ></script>

This simple static demo can be tested live on

Code can be found in the privacy-components-web repository.

Check Out our Demo Web App

Need to see a more advanced use case? We got you covered.

Check it out

See our Demo Web App in action on and read its code in the privacy-components-web repository.

We keep this project as minimalist as possible for the sake of simplicity. It only use lit, with Carbon Web Components and the Vaadin Router. The build system has been set up using the Open WC generator (refer to the README for more information).

You can either directly clone the whole monorepo locally:

git clone
cd privacy-components-web/demos/devkit-simple-tutorial/

or use git sparse-checkout to only download the project itself:

mkdir devkit-web-demo
cd devkit-web-demo
git init
git remote add -f origin
git config core.sparsecheckout true
echo "demos/devkit-simple-tutorial" >> .git/info/sparse-checkout
git pull origin main

Then, you'll need to install the project's dependencies using classic yarn (v1) or npm:

yarn install
# OR
npm install

Then, start the development server:

yarn start
# OR
npm start

and open the application in your browser using the given URL.


The next steps have been already developed in this demo project. You can therefore refer to it whenever in doubt.

3. Assert Your Privacy Rights

Now, open the demo web app or static page in your browser to see this component in action:

first screen of the PRCI component

Here, your users can directly choose from a wide range of privacy request types.

This includes the classical consultation (access), deletion and modification of their data, of course, but also more advanced operations, including but not limited to:

  • requesting the portability of their data to a compatible system
  • advanced management of their consents (by objecting to and restricting proceeding of their data, or revoking previously given consents)
  • and retrieving more generic privacy-related information regarding your organization (via the "transparency" request type).

These are just requests. You determine how those are handled and answered, manually or automatically.

If, for example, your users want to make an Access request, and click on the Access button, they will be able to ask you to give them access to all the data you have on them, or to only select a subset of it.

First screen for an Access Request in the PRCI component Second screen for an Access Request in the PRCI component

Depending on your configuration, two scenarios can then happen.

If like in this example, you set up everything to automatically treat the request, then your users will directly see their request granted (or rejected, depending on the parameters you defined).

Status of a Delete Request as shown in the PRCI component: under review

Other scenarios might however require to be manually handled. In this case, your users will see their request is "pending" (i.e. waiting to be handled by your organization).

In this demo, you can see this happen when sending a delete request:

Status of a Delete Request as shown in the PRCI component: under review

4. Add an Admin Interface

An additional Privacy Component for the Web, called the "Data Consumer Interface", is here to help you handle these requests. It offers a simple interface to allow relevant members of your organization (e.g. system administrators or DPOs) to manage all privacy requests related matters.

To add the Data Consumer Interface Web Component to your project, simply follow the same steps as for the Privacy Request Capture Interface one, but with the @blindnet/dci npm package, and <bldn-data-consum> HTML custom element.

<!DOCTYPE html>
<html lang="en-GB">
<meta charset="utf-8" />
<title>Privacy Components for the Web - Minimal Static Demo</title>
<h1>Privacy Components for the Web - Minimal Static Demo</h1>

<h2>Assert Your Privacy Rights</h2>


<h2>Manage Your Users' Requests</h2>


<script src="" type="module" ></script>
<script src="" type="module" ></script>

5. Answer Your Users' Requests

👷‍♂️ writing in progress

Open your web app / page, and follow the instructions given in the Data Consumer Interface Web Component.

6. Set-up Storage

👷‍♂️ writing in progress

A Data Access Component is here to transform requests from the Privacy Computation Engine to efficiently execute automated operations on your data storage.

You can choose to use the Capture Component and directly store the captured data in blindnet's preconfigured storage, or your own storage service.

You can also directly connect the Data Access Component to your own storage service without using the Capture Component. For see sake of simplicity, we'll choose this option for this tutorial.

For that, we'll set up a dedicated demo storage service in Java, and connect it to the Capture Component using the Java Storage Connector library.

Code for this demo stage service can be found in the example directory in the librarie's repository: > example.