项目作者: philsch

项目描述 :
Lightweight placeholders compatible with Usercentrics CMP
高级语言: JavaScript
项目地址: git://github.com/philsch/usercentrics-widgets.git
创建时间: 2021-06-12T10:41:27Z
项目社区:https://github.com/philsch/usercentrics-widgets

开源协议:MIT License

下载


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:
      1. <head>
      2. <link type="text/css" rel="stylesheet" href="ucw.min.css"/>
      3. </head>
    2. ucw.js (or if you need IE11 support ucw.legacy.js) at the end of your <body>
      1. <script src="ucw.js"></script>
      2. </body>
      3. </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.

  1. https://cdn.jsdelivr.net/gh/philsch/usercentrics-widgets@main/dist/ucw.js
  2. 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.