Lightweight placeholders compatible with Usercentrics CMP
Lightweight customizable placeholders for third party content of your website (e.g. Youtube Videos) compatible with the
Usercentrics CMP.
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!
iframe
elements you want to replacesrc
to data-src
class="uc-widget"
data-uc-id
with the ID of the matching servicedata-uc-id="BJz7qNsdj-7"
for Youtube)/dist/
folder to your websiteucw.min.css
into the <head>
section:
<head>
<link type="text/css" rel="stylesheet" href="ucw.min.css"/>
</head>
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.
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.