All Collections
How to embed a policy on a React site
How to embed a policy on a React site
Updated over a week ago

Termly offers three convenient ways to embed a policy on your React website. In this guide, we'll focus on creating a reusable component using the code snippet method, which allows you to dynamically embed the policy directly on your page.

Your Options Include:

  • HTML format: Paste static HTML directly onto your website

  • URL: Link to a Termly-hosted URL

  • Code snippet: Embed the policy on your page using a code snippet

Using the Code Snippet Method

To embed a Termly policy using the code snippet option on a React page, you can utilize the useEffect hook and the createElement function from the React package. This approach allows you to create a script element and add it to the page dynamically.

Here's a step-by-step guide:

  1. Create a New Component: Name it ‘Policy’ or any other suitable name.

  2. Import the Necessary Dependencies: You'll need to import React and useEffect from the React package.

  3. Use the useEffect Hook: Inside the component, use the useEffect hook to create a script element and append it to the body of the document.

  4. Set the Script Source: The source should point to Termly's embed policy script.

  5. Add the Data ID: Change the value of data-id to the specific data-id for the document you are embedding. The data-id is listed in the code snippet that you export from Termly.

Here's an example:

import React, { useEffect } from "react";

export default function Policy() { useEffect(() => { const script = document.createElement("script"); script.src = ""; script.async = true; document.body.appendChild(script); }, []); return ( <div name="termly-embed" data-id="43904e5f-c5ed-4170-800a-74e5246a8675" data-type="iframe" ></div> ); }
Did this answer your question?