Usercentrics-widgets NPM

Usercentrics Widgets

GitHub release (latest by date) size ucw.js size ucw.legacy.js

Lightweight customizable placeholders for third party content of your website (e.g. Youtube Videos) compatible with the Usercentrics CMP.

Disclaimer

Unlike the Usercentrics Smart Data Protector, this library does not block third party content automatically. You have to change your website according the documentation in this README!
This is a community project and no official product from Usercentrics.

🐞 Report bugs

I have just started with this project, please create a Github issue if you encounter any bugs, thanks!

🚀 Quickstart

Setup Usercentrics CMP
For each iframe elements you want to replace
1. change src to data-src
2. add class="uc-widget"
3. add the attribute data-uc-id with the ID of the matching service (for example data-uc-id="BJz7qNsdj-7" for Youtube)
Download and add the files from the /dist/ folder to your website
1. ucw.min.css into the <head> section:
```
<head>
  <link type="text/css" rel="stylesheet" href="ucw.min.css"/>
</head>
```
2. ucw.js (or if you need IE11 support ucw.legacy.js) at the end of your <body>
```
  <script src="ucw.js"></script>
</body>
</html>
```

Instead of downloading the files you can also use the jsdelivr CDN, however it's recommended to host the files on your server to avoid third party requests.

https://cdn.jsdelivr.net/gh/philsch/usercentrics-widgets@main/dist/ucw.js
https://cdn.jsdelivr.net/gh/philsch/usercentrics-widgets@main/dist/ucw.min.css

Refer to the /example/ directory for complete examples.

📺 Supported technologies

✅ all iframes
⏳ background images only for Youtube at the moment

🛠 Customization

All widgets can be changed via data attributes:

Attribute	Description	Example
`data-src`	`src` of the original element	`data-src="https://www.youtube.com/embed/xxx"`
`data-text`	Text for the placeholder	`data-text="We need your consent"`
`data-accept`	Label for the accept button	`data-accept="ok"`

🎨 Styling

Instead of using the predefined CSS file, you can use your own. See /style/ucw.css as a reference which CSS classes need to be defined and /example/customized.html as an example.

@everything-registry/sub-chunk-3030 @infinitebrahmanuniverse/nolb-user

2 years ago

2 years ago

2 years ago

3 years ago