{"id":25839751,"url":"https://github.com/netresearch/usercentrics-widgets","last_synced_at":"2025-10-24T14:10:48.943Z","repository":{"id":41890610,"uuid":"444431806","full_name":"netresearch/usercentrics-widgets","owner":"netresearch","description":"Lightweight customizable placeholders for third party content of your website (e.g. Youtube Videos) compatible with the Usercentrics CMP.","archived":false,"fork":false,"pushed_at":"2024-09-24T07:23:37.000Z","size":1944,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-29T21:12:00.353Z","etag":null,"topics":["usercentrics"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netresearch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-04T13:36:00.000Z","updated_at":"2024-09-24T07:23:39.000Z","dependencies_parsed_at":"2025-02-18T13:26:43.467Z","dependency_job_id":"dfa77c19-0b7f-43b7-af88-59dd6e25fb63","html_url":"https://github.com/netresearch/usercentrics-widgets","commit_stats":{"total_commits":43,"total_committers":5,"mean_commits":8.6,"dds":0.5581395348837209,"last_synced_commit":"a8dd3cfbda26d99d1d9ae4609be5c2289cc965f5"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fusercentrics-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fusercentrics-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fusercentrics-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fusercentrics-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netresearch","download_url":"https://codeload.github.com/netresearch/usercentrics-widgets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241317608,"owners_count":19943199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["usercentrics"],"created_at":"2025-03-01T04:34:17.938Z","updated_at":"2025-10-24T14:10:48.935Z","avatar_url":"https://github.com/netresearch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Usercentrics Widgets \n=====================\n\nLightweight customizable placeholders for third party content of your website (e.g. Youtube Videos) compatible with the\n[Usercentrics CMP](https://usercentrics.com). The library supports both the classic `UC_UI` interface and the\nUsercentrics v3 Browser API.\n\n* Unlike the [Usercentrics Smart Data Protector](https://docs.usercentrics.com/#/smart-data-protector), this library \n  **does not block** third party content automatically. You have to change your website according the documentation \n  in this README!\n  \n* This is based on a [community project](https://philsch.github.io/usercentrics-widgets/) and no official product from Usercentrics \n\n\n## Quickstart\n\n1. Setup Usercentrics CMP\n2. For each `iframe` and `script` elements you want to edit\n    1. change `src` to `data-uc-src`\n    2. add `data-usercentrics=\"[SERVICE NAME]\"` with the Name of the matching service form Usercentrics admin area\n        1. (for example `data-usercentrics=\"Google Maps\"` for Google Maps)\n    3. add the attribute `data-uc-id` with the ID of the matching service form Usercentrics admin area\n       (for example `data-uc-id=\"BJz7qNsdj-7\"` for Youtube)\n3. The Packet can load via NPM \n   1. Include in package.json\n      ```\n      \"devDependencies\": {\n           \"@netresearch/usercentrics-widgets\": \"^2.0.0\"\n      },\n      ```        \n      or\n   2. Install via NPM\n      ```\n      npm install @netresearch/usercentrics-widgets\n      ```\n\n4. Include and add the files from the `/dist/` folder to your template\n    1. `ucw.min.css` into the `\u003chead\u003e` section: \n       ```html\n       \u003chead\u003e\n         \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"ucw.min.css\"/\u003e\n       \u003c/head\u003e\n       ```\n    2. `ucw.js` (or if you need IE11 support `ucw.legacy.js`) at the end of your `\u003cbody\u003e`\n       ```html\n         \u003cscript src=\"ucw.js\"\u003e\u003c/script\u003e\n       \u003c/body\u003e\n       \u003c/html\u003e\n       ```\n\n5. Example\n   1. IFrame (Google Maps) \n      ```\n      \u003ciframe data-usercentrics=\"Google Maps\" data-uc-id=\"S1pcEj_jZX\" data-uc-src=\"https://www.google.com/maps/d/u/1/embed?mid=XXX\" width=\"852\" height=\"480\"\u003e\u003c/iframe\u003e\n      ```\n   2. External Script (bookingkit)\n      ```\n      \u003cdiv id=\"bookingKitContainer\" data-cw=\"6dfd2c67962b9442abd2a28759a7445e\"\u003e\u003c/div\u003e\n      \u003cscript type=\"text/plain\" data-usercentrics=\"bookingkit\" data-uc-id=\"Ewb9uz1Rp\" data-uc-src=\"https://4706b1799db005bf104.widget.bookingkit.net/bkscript/XXX/\" async\u003e\u003c/script\u003e\n      ```\n   3. Google Tag Manager and scripts without output can still be used as before\n      ```\n      \u003cscript type=\"text/plain\" data-usercentrics=\"Google Tag Manager\"\u003e\n            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n            j=d.createElement(s),dl=l!='dataLayer'?'\u0026l='+l:'';j.async=true;j.src=\n            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n            })(window,document,'script','dataLayer','{settings.GoogleTagManagerContainerId}');\n      \u003c/script\u003e\n      ```\n\n## Pipeline on github\n* The pipeline is based on [Github Actions](https://github.com/netresearch/usercentrics-widgets/actions)\n* The pipline build the `dist` folder and the JavaScript and css files\n* The pipline also runs the tests\n\n## Build changes locally\n1. the /dist/ folder contains the latest version of the library\n2. Changes can do in the /src/ folder\n3. Install the library via NPM with `npm install`\n4. Build the changes with `npm run build`\n\n## Supported technologies\n* all iframes\n* all scripts\n* background images only for Youtube at the moment\n\n## Customization\n\nAll widgets can be changed via data attributes:\n\n| Attribute                  | Description                     | Example                                                                       |\n|----------------------------|---------------------------------|-------------------------------------------------------------------------------|\n| `data-uc-src`              | `src` of the original element   | `data-uc-src=\"https://www.youtube.com/embed/xxx\"`                             |\n| `data-text`                | Text for the placeholder        | `data-text=\"We need your consent\"`                                            |\n| `data-accept`              | Label for the accept button     | `data-accept=\"ok\"`                                                            |\n| `data-uc-background-image` | URL for custom background-image | `data-uc-background-image=\"https://picsum.photos/id/12/1920/1080.jpg\"` |\n\n##  Styling\n\nThere is a scss template in the style folder, this is independent of the css file from the dist folder\n\nInstead of using the original predefined CSS file, you can use your own. See [/style/ucw.css](/style/ucw.css) as a reference\nwhich CSS classes need to be defined and [/example/customized.html](/example/customized.html) as an example.\n\n\n\n## Configuration via config file (optional)\n\nYou can centrally control the behavior and texts of the widgets using an optional config file. The file exposes a global variable `window.UCW_WIDGET_CONFIG`.\n\nHow to include:\n\n- Include `ucw.js` (or `ucw.legacy.js`) with an additional `data-config` attribute pointing to your configuration file.\n\nExample:\n\n```html\n\u003chead\u003e\n  \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"/assets/{BUILD_NUMBER}/js/usercentrics-widgets/ucw.min.css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  ...\n  \u003cscript src=\"/assets/{BUILD_NUMBER}/js/usercentrics-widgets/ucw.js\"\n          data-config=\"/assets/{BUILD_NUMBER}/js/usercentrics-widgets/ucw.config.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nStructure of the configuration (`window.UCW_WIDGET_CONFIG`):\n\n- i18n (language-specific; keys de/en, case-insensitive)\n  - textHtml: Complete HTML for the placeholder (overrides prefix/suffix variant)\n  - acceptLabel: Text of the accept button\n  - acceptLabelClass: Additional CSS class(es) for the control element wrapping the button (added alongside `uc-widget-control`)\n  - textServicePrefix: Text before the service name, if `textHtml` is not used\n  - textSuffixHtml: HTML after the service name, if `textHtml` is not used\n- Root level (optional, fallback for all languages):\n  - textHtml, acceptLabel, acceptLabelClass, textServicePrefix, textSuffixHtml\n\nNotes:\n- Language is detected via the `lang` attribute on the `\u003chtml\u003e` element. For German, `de-DE`, `de` or `DE` are supported; otherwise English is used.\n- A complete example can be found here:\n  - `src/static/assets/js/usercentrics-widgets/src/config/ucw.config.example.js`\n  - A project example is here: `src/static/assets/js/usercentrics-widgets.config.js`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetresearch%2Fusercentrics-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetresearch%2Fusercentrics-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetresearch%2Fusercentrics-widgets/lists"}