CookieScript integration for React web framework

How to add CookieScript cookie banner on React.js website?

Written by NelsonLast update 5 months ago

To install the CookieScript cookie banner code on React.js website, perform the following steps:

Go to your Cookie-Script.com account > Settings > Install:
Configure geo-targeting.
Copy your CookieScript code.
Install your CookieScript code on the React hooks library either by using npm or using yarn.
Installation using npm:
```
npm install use-cookiescript-hook
```
Installation using yarn:
```
yarn add use-cookiescript-hook
```
Use your CookieScript code to complete the CookieScript integration for React:
```
import useCookieScript from "use-cookiescript-hook";
```
```
useCookieScript(url, options);
```
- url: (string) The URL of your installation banner.
- options: An object containing optional configurations:
  - position: (string) Specifies the position of the script in the HTML document. Possible values are "head-top", "head-bottom", or "body-bottom". Default is "body-bottom".
  - cookieName: (string) Specifies the name of the cookie. Default is "CookieScriptConsent".
  - language: (string) Specifies the language of the banner. For example, "en" for English. Default is undefined.
  - sameSite: (string) Specifies the SameSite attribute of the cookie. Possible values are "lax", "strict", or "none". Default is undefined.
  - restrictDomain: (boolean) Specifies whether to restrict the domain of the cookie. Default is "false".
As an example, your final React code should look like this:
```
import useCookieScript from "use-cookiescript-hook";

const App = () => {
```
```
  useCookieScript("{your installation banner URL from the account}", {
```
```
    position: "head-top",
```
```
  });
```
```
  return (
```
```
    // Your React component JSX code here
```
```
  );
}
```
Make sure to replace {your installation banner URL from the account} with the actual URL provided by your CookieScript account. This will embed the cookie consent banner into your React application at the specified position.

CookieScript is installed on React web framework now and should be ready for use.

Note: Minimal React version should be 16.8 or bigger.

For more information, read the following guides:

Note: If the banner doesn’t appear after the implementation, check if you don’t use any Cache plugin or extension, which prevents the banner from popping-up.

Did this answer your question?