Skip to main content

1. Expose the Privacy Portal

User interfaces for the blindnet devkit (aka Blindnet web modules) 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 Portal, 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 Privacy Portal bundle (included in the @blindnet/privacy-portal npm package) from the jsdelivr CDN:

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

Add the Interface

Now, let's expose the <bldn-privacy-portal> custom element:

<body>
<h1>Privacy Request Portal</h1>
<bldn-privacy-portal id="devkit"></bldn-privacy-portal>
</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 Privacy Portal will fire an event containing the JSON representation of the request.

You can catch this event in your application by adding an event listener:

<body>
<h1>Privacy Request Portal</h1>
<bldn-privacy-portal id="devkit"></bldn-privacy-portal>
<script>
/**
* Log the request within the event emitted by the Privacy Portal
* @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 Privacy Portal element
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 create a devkit application.