Skip to content

Collection of Web Components helping developers to execute privacy-by-design and privacy UX.

License

Notifications You must be signed in to change notification settings

blindnet-io/privacy-components-web

Repository files navigation

README

Blindnet Web Modules

Collection of Web Components helping developers to execute privacy-by-design and privacy UX.

blindnet.dev

Documentation  •  Submit an Issue  •  Online Chat  •  Demo (Main | Develop | DPO Main | DPO Develop)

Components

The Blindnet Web Modules are implemented as a collection of web components, with associated npm packages.

Component Npm Package Purpose
<bldn-privacy-portal> @blindnet/privacy-portal Make and track privacy requests
<bldn-bridge> @blindnet/bridge Respond to privacy requests
🚧 👷 and more soon...

Get Started

🚀 Check out our Intro Tutorial to get started in a snap.

Installation & Usage

CDN

You can embed the Blindnet Web Modules in your website through a script import or by including the appropriate package as a project dependency.

We recommend using the jsdelivr CDN for even more simplicity and better performance.

For example, if you want to add our Privacy Portal to your web page, just add the following script tag:

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

And add the associated custom element to your page:

<bldn-privacy-portal></bldn-privacy-portal>

Npm/Yarn

Use npm or yarn to install the module you need:

npm i @blindnet/<component-name> # for example @blindnet/privacy-portal
# OR
yarn add @blindnet/<component-name>

To use a module, simply import the associated package, and add the associated custom element to your document.

For example, when using the <bldn-privacy-portal> component:

<script type="module">
  import '@blindnet/privacy-portal';
</script>

<bldn-privacy-portal></bldn-privacy-portal>

Advanced Usage

All modules for the web are delivered with two different builds:

/dist/index.js (and related files):

  • "raw" unbundled JavaScript files
  • for testing and projects using their own build system
  • this is the version you get when importing the package into a npm project
  • TypeScript typings are only available for this version

/dist/index.all.min.js:

  • self-sufficient bundle with all dependencies included

Import Maps

An import map (/import-map.json) is provided with each module as an example to use with the "raw" and core builds to customize the URL associated with each dependency's bare module specifier.

Warning

You'll have to change the URLs values to use this map, as the given unpkg examples would require the ?module option.

Documentation

📑 Components' API reference, developer documentation, and complementary docs are provided on blindnet.dev.

Warning

The blindnet web modules are still at a very early stage of development. There may be breaking changes during this period.

Community

All community participation is subject to blindnet’s Code of Conduct.

Stay up to date with new releases and projects, learn more about how to protect your privacy and that of our users, and share projects and feedback with our team.

Contributing

Contributions of all kinds are always welcome!

If you see a bug or room for improvement in this project in particular, please open an issue or directly fork this repository to submit a Pull Request.

If you have any broader questions or suggestions, just open a simple informal DevRel Request, and we'll make sure to quickly find the best solution for you.

For more information on how to contribute to this project, see CONTRIBUTING.md.

License

The blindnet web modules project is available under MIT (and here is why).