Lightweight placeholders compatible with Usercentrics CMP
npm install usercentrics-widgetsUsercentrics 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.
I have just started with this project, please create a Github issue if you encounter any bugs, thanks!
1. Setup Usercentrics CMP
1. For each iframe elements you want to replace
1. change src to data-src
1. add class="uc-widget"
1. add the attribute data-uc-id with the ID of the matching service
(for example data-uc-id="BJz7qNsdj-7" for Youtube)
1. Download and add the files from the /dist/ folder to your website
1. ucw.min.css into the section:
``html`
ucw.js
1. (or if you need IE11 support ucw.legacy.js) at the end of your
`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"` |

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.