<brief-me-gdpr>

A Web Component for a human readable GDPR compliance.

Creative Commons License CC By 4.0

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 4.0 International license.

<brief-me-gdpr>

<brief-me-gdpr> is an awesome Web Component for a human readable GDPR compliance.

As easy as HTML

<brief-me-gdpr> is just an HTML element. You can it anywhere you can use HTML!

<brief-me-gdpr></brief-me-gdpr>

Configure with attributes

<brief-me-gdpr> can be configured with attributed as JS objects.

<brief-me-gdpr></brief-me-gdpr>
      customElements.whenDefined('brief-me-gdpr').then(wc => {
gdprComponent = document.getElementById('example');
gdprComponent.user = [
{ title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' },
{ title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'},
{ title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' },
{ title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' },
{ title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' },
{ title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' }
];
gdprComponent.usage = [
{ title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' },
{ title: 'Comercial', iconURL: '/brief-me-gdpr/assets/comercial.png', description: 'We use some of your data for commercial purposes, such us offer you a filtered product' },
{ title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' }
];

gdprComponent.protection = [
{ title: 'Data Protection Officer', iconURL: '/brief-me-gdpr/assets/officer.png', description: 'A DPO is responsible for overseeing the data protection approach, strategy, and its implementation' },
{ title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'},
{ title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' }
];

gdprComponent.management = [
{ title: 'Access', action: (ev) => console.log('User has clicked on Access')},
{ title: 'Modify', action: (ev) => console.log('User has clicked on Modify')},
{ title: 'Erase', action: (ev) => console.log('User has clicked on Erase')},
{ title: 'Port', action: (ev) => console.log('User has clicked on Portability')},
{ title: 'Forget', action: (ev) => console.log('User has clicked on Forget')},
{ title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')},
{ title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')}
]
})

Retrieve from CDN or NPM

<brief-me-gdpr> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

npm i brief-me-gdpr
<script type="module" src="https://unpkg.com/brief-me-gdpr?module"></script>
import { BriefMeGDPR } from 'https://unpkg.com/brief-me-gdpr?module';