Skip to content

Lightweight placeholders compatible with Usercentrics CMP

License

Notifications You must be signed in to change notification settings

philsch/usercentrics-widgets

Repository files navigation

Usercentrics Widgets

GitHub release (latest by date) Build Status js-semistandard-style 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
  2. 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)
  3. 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

screenshot customization

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.