usercentrics-widgets

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

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



`
1. ucw.js (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"` |

🎨 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.