Usercentrics Widgets
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
iframeelements you want to replace- change
srctodata-src - add
class="uc-widget" - add the attribute
data-uc-idwith the ID of the matching service (for exampledata-uc-id="BJz7qNsdj-7"for Youtube)
- change
- Download and add the files from the
/dist/folder to your website-
ucw.min.cssinto the<head>section:<head> <link type="text/css" rel="stylesheet" href="ucw.min.css"/> </head>
-
ucw.js(or if you need IE11 supportucw.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.