Skip to main content

1. Expose the Privacy Request Interface

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

info

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

The first component we'll use is the Privacy Request Capture Interface (PRCI), an entry point for submitting and viewing Privacy Requests.

For this section of the tutorial, we will start with the simple static frontend available here.

Load the Bundle

First we'll load the PRCI bundle (included in the @blindnet/prci npm package) from the jsdelivr CDN:

<head>
...
<script src="https://cdn.jsdelivr.net/npm/@blindnet/prci@latest/dist/index.all.min.js" type="module"></script>
...
</head>

Add the Interface

Now, let's expose the <bldn-priv-request> custom element:

<body>
<h1>Privacy Request Portal</h1>
<bldn-priv-request id="devkit"></bldn-priv-request>
</body>

At this point you should see the request interface, which you can use to build your first Privacy Request.

Listen for Requests

After we build our request and click submit, the PRCI will fire an event containing the JSON representation of the request.

You can listen for and use this event in your application by adding an event listener:

<body>
<h1>Privacy Request Portal</h1>
<bldn-priv-request id="devkit"></bldn-priv-request>
<script>
/**
* Log the request within the event emitted by the PRCI
* @param e {CustomEvent}
*/
function catchRequest(e) {

// Stop the request from bubbling further
e.stopPropagation()

// Extract the request object
const { request } = e.detail

// Log the request
console.log(request)
}

// Add listener to the PRCI element
const email = document.getElementById("devkit").addEventListener("bldn-request-builder:request-created", catchRequest)
</script>
</body>
Checkpoint

We can now build a privacy request and capture the emitted request object.

The HTML file with our work so far can be found here.

Next, let's set up the Privacy Computation Engine.