Versions Compared

Old Version 3

changes.mady.by.user sharon.borensztein (Unlicensed)

Saved on

compared with

New Version 4

changes.mady.by.user Bernardo Neuville

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

How to implement Usercentrics in Angular

...

For the Angular Implementation, you will need to install Angular CLI globally on your machine. You can install it, by running it on the terminal:

Code Block
languagebash
npm install -g @angular/cli

(we assume that you have node.js installed on your computer)

To create a new workspace and an initial application, you will need to run:

Code Block
ng new angular

Navigate to the folder in the terminal by using cd angular, and then run the following command to launch the app:

Code Block
languagebash
ng serve --open

Assuming that you have an Angular App already working, you can implement our Usercentrics Scripts in the following way:

  • CMPv1 Implementation

    • Open index.html in your app directory

    • Add the following script to the <head> tag:

      Code Block
      languagehtml
      //Change 'xxxxxx' to your settingsID
<script>
   window.usercentrics = {
    settingsId: 'xxxxxx'
  };
  window["usercentrics"] = {
    paths: {
      "bundle": "https://app.usercentrics.eu/latest/bundle.js",
    },
    settingsIds: 'xxxxxx',
    settingsVersionOverwrite: 'preview',
  };
</script>

    • Then save and the localhost will reload and load into the page, the bundle.js.

  • CMPv2 Implementation

    • Open index.html in your app directory

    • Add the following script to the <head> tag:

      Code Block
      //Change 'xxxxxx' to your settingsID

//Normal Bundle
<script id="usercentrics-cmp" data-settings-id="XXXXXXXX" src="https://app.usercentrics.eu/browser-ui/latest/loader.js"  async></script>
      Then save and the localhost will reload and load into the page, the bundle.js
Do you need further help?
...