How to use Termly cookie in react.js ?

To use the Termly cookie in a React.js application, you need to follow these steps:

1. Install the Termly package: Start by installing the Termly package using npm or yarn. Open your project's terminal and run the following command:

```bash
npm install termly
```
or
```bash
yarn add termly
```

2. Import and use Termly in your component: In your React component file, import the Termly package at the top of the file:

```javascript
import { TermlyCookies } from 'termly';
```

3. Initialize Termly: In the component's lifecycle method (e.g., `componentDidMount`), initialize the Termly cookie by calling the `init` method and passing the Termly script URL and your Termly consent policy ID:

```javascript
componentDidMount() {
  TermlyCookies.init({
    policyUrl: 'https://www.termly.io/legal/privacy-policy',
    policyId: 'your-policy-id',
  });
}
```

Make sure to replace `'https://www.termly.io/legal/privacy-policy'` with the URL to your privacy policy and `'your-policy-id'` with your actual policy ID from Termly.

4. Handle the consent banner: Termly will automatically inject the consent banner into your application. To handle the consent banner display, you can render it conditionally based on whether the user has already given consent. For example:

```javascript
render() {
  const isConsentGiven = TermlyCookies.consentIsGiven();
  return (
   

5. Use the cookie consent information: You can access the cookie consent information and make decisions based on it. For example, you can retrieve the user's consent status and handle different behaviors accordingly:

```javascript
// Check if consent is given
const isConsentGiven = TermlyCookies.consentIsGiven();

// Get the user's consent preferences
const preferences = TermlyCookies.getUserPreferences();

// Use the preferences to handle cookie behavior
if (isConsentGiven && preferences && preferences.marketing) {
  // Load marketing cookies
} else {
  // Do not load marketing cookies
}
```

Make sure to handle the consent banner display and cookie behavior based on your specific requirements and policies.

Regarding the error message "window.TermlyCookies is undefined," please ensure that you have properly imported the Termly package and that you're calling the `TermlyCookies.init` and `TermlyCookies.consentIsGiven` functions after the component has mounted. Additionally, double-check that the Termly script is loaded correctly in your application.

If you continue to encounter the error, please provide more details or share your code snippet so that I can assist you further.

To get a cookie, you can use the following code:

const value = Termly.getCookie('name');

If you are facing the error window.TermlyCookies is undefined, it means that the Termly library has not been loaded correctly. To fix this error, make sure that the library is installed and imported correctly.

Code to use Termly cookies in React.js:

import * as Termly from 'termly';

const App = () => {
  const [name, setName] = useState('');
  const [value, setValue] = useState('');

  useEffect(() => {
    // Set a cookie
    Termly.setCookie('name', 'value');

    // Get a cookie
    const cookieValue = Termly.getCookie('name');
    setValue(cookieValue);
  }, []);

  return (
    

       setName(e.target.value)}
      />
       setValue(e.target.value)}
      />
       Termly.setCookie(name, value)}>Set Cookie
       Termly.getCookie(name)}>Get Cookie
    
  );
};

export default App;

The code you provided is a React component that embeds the Termly cookie preference modal on a website. The component uses the following steps to do this:

1. It creates a new script element and sets its src attribute to the URL of the Termly embed script.
2. It sets the data-website-uuid attribute of the script element to the website's UUID.
3. It appends the script element to the head of the document.
4. It adds an event listener to the load event of the script element. The event listener sets the component's isScriptLoaded state to true.
5. The component's displayPreferenceModal method checks the value of the isScriptLoaded state. If the state is true, the method calls the displayPreferenceModal method of the TermlyCookies object. If the state is false, the method logs a message to the console.

The displayPreferenceModal method of the TermlyCookies object displays the Termly cookie preference modal. The modal allows users to choose which cookies they want to allow on the website.

To use the code, you would need to add it to the componentDidMount method of your React component. You would also need to replace the value of the your-website-uuid variable with the UUID of your website

On page load, it is working but when I click on the button of manage cookie preferences it shows this error - TermlyCookies object is not defined and the popup is not showing. window.TermlyCookies

The error "TermlyCookies object is not defined" means that the Termly embed script has not finished loading when you click on the "Manage Cookie Preferences" button. This can happen if the script is blocked by a ad blocker or if the website is loading slowly.

To fix the error, you can try the following:

• Disable your ad blocker.
• Wait for the website to load completely before clicking on the "Manage Cookie Preferences" button.
• Contact Termly support for help.

Here are some additional things you can try:

• Make sure that the Termly embed script is loading from the correct URL.
• Check the console for any errors that might be preventing the Termly embed script from loading.
• Try reloading the page.
• Contact your hosting provider for help.

note : refference from google for this querry

On page load, it is working but when I click on the button of manage cookie preferences it shows this error - TermlyCookies object is not defined
and the popup is not showing.

@prathap Reddy

componentDidMount() {
  const script = document.createElement('script');
  script.src = 'https://app.termly.io/embed.min.js';
  script.setAttribute('data-website-uuid', 'your-website-uuid');
  document.head.appendChild(script);

  script.addEventListener('load', () => {
    this.setState({ isScriptLoaded: true });
  });
}

// ...

displayPreferenceModal() {
  if (this.state.isScriptLoaded) {
    if (typeof window !== 'undefined' && window.TermlyCookies) {
      window.TermlyCookies.displayPreferenceModal();
    } else {
      console.error('TermlyCookies object is not defined');
    }
  } else {
    console.log('Termly embed script has not finished loading');
  }
}
 

you can try this code

otherwise you can use this github

Hi, Prathap.
I have only the UUID.

This is my code-

import React, { Component } from 'react';
import './TermlyCookieConsent.scss';
class TermlyCookieConsent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isScriptLoaded: false,
        };
        this.displayPreferenceModal = this.displayPreferenceModal.bind(this);
    }
    componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://app.termly.io/embed.min.js';
        script.setAttribute('data-website-uuid', 'added my uuid');
        document.head.appendChild(script);
        // Listen for the load event on the Termly embed script
        script.addEventListener('load', () => {
            console.log('Termly embed script loaded.');
            this.setState({ isScriptLoaded: true });
        });
        // Add error event listener to the script
        script.addEventListener('error', (event) => {
            console.error(`Error loading Termly embed script: ${event.message}`);
        });
    }
    componentWillUnmount() {
        const script = document.querySelector('script[src="https://app.termly.io/embed.min.js"]');
        script.parentNode.removeChild(script);
    }
    displayPreferenceModal() {
        try {
            console.log('Opening Termly Cookie Consent modal...');
            if (this.state.isScriptLoaded && typeof window !== 'undefined' && window.TermlyCookies) {
                console.log('TermlyCookie object is defined. Calling displayPreferenceModal()...');
                window.TermlyCookie.displayPreferenceModal();
            } else {
                console.error('TermlyCookie object is not defined. Unable to open modal.');
            }
        } catch (error) {
            console.log(error);
        }
    }
    render() {
        return (
            

                

                    
                        Manage Cookie Preferences
                    
                
            
        );
    }
}
export default TermlyCookieConsent;

Termly provides a cookie consent solution that can be easily integrated into a React.js application. To use Termly cookie consent in your React.js app, you can follow these steps:

1. Sign up for a Termly account and create a cookie policy.

2. Install the Termly JavaScript SDK in your React.js project using the following command:  

   npm install termly

3. In your React component where you want to display the cookie banner, you can add the following code to load the Termly cookie consent script:  

   useEffect(() => { const script = document.createElement("script");
   script.src = "https://cdn.termly.io/launcher/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js";
   script.async = true;
   document.body.appendChild(script); return () => { document.body.removeChild(script);
   };
   }, []);

4. Replace the xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with the actual script ID for your cookie policy, which can be found in your Termly account dashboard.

5. Finally, add the Termly cookie consent banner to your component by using the data-termly-slug attribute:

   Replace cookie-policy with the actual slug for your cookie policy, which can also be found in your Termly account dashboard.