React

How to implement Usercentrics in React

React is mostly used ad the “view” component in the MVC architecture in which the UI could be updated without going back to the server to obtain a new view.

To create a new React project, run on the terminal:

npx create-react-app my-app

To run the newly created app, on the terminal go to the my-app directory and run on the terminal:

npm start

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

Assuming that you have a React App already working, you can implement our Usercentrics Script in the following way:

CMPv1 Implementation

Open index.html inside the public directory

Add the following script to the <head> tag:

//Change 'xxxxxx' to your settingsID
<script>
  window["usercentrics"] = {
    settingsId: 'xxxxxx',
    settingsVersionOverwrite: 'preview',
  };
</script>
<script type="application/javascript" src="https://app.usercentrics.eu/latest/main.js" async></script>

CMPv2 Implementation:

Open index.html inside the public directory

Add the following script to the <head> tag:

//Change 'xxxxxx' to your settingsID

<script id="usercentrics-cmp" data-settings-id="XXXXXXXX" src="https://app.usercentrics.eu/browser-ui/latest/loader.js"  async></script>

Do you need further help?

How can I get help with technical questions?