How to use Termly cookie in react.js ?

Question

How to use Termly cookie in react.js ? while using it I faced the error window.TermlyCookies is undefined.

Tuhin Paul · Answer

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.

Tuhin Paul · Answer

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;

Mohamed Azarudeen Z · Answer

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 ( {!isConsentGiven && Render your consent banner component here } {/* Rest of your component's code */} ); } ``` 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.

Prathap Reddy · Answer

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: It creates a new script element and sets its src attribute to the URL of the Termly embed script. It sets the data-website-uuid attribute of the script element to the website's UUID. It appends the script element to the head of the document. It adds an event listener to the load event of the script element. The event listener sets the component's isScriptLoaded state to true . 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

Brahma Prakash Shukla · Answer

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

Prathap Reddy · Answer

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

Brahma Prakash Shukla · Answer

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;

Prathap Reddy · Answer

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: Sign up for a Termly account and create a cookie policy. Install the Termly JavaScript SDK in your React.js project using the following command: npm install termly 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); }; } []); 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. 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.