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:
Create a New Component: Name it ‘Policy’ or any other suitable name.
Import the Necessary Dependencies: You'll need to import
ReactanduseEffectfrom the React package.Use the
useEffectHook: Inside the component, use theuseEffecthook to create a script element and append it to the body of the document.Set the Script Source: The source should point to Termly's embed policy script.
Add the Data ID: Change the value of
data-idto the specific data-id for the document you are embedding. Thedata-idis 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 = "https://app.termly.io/embed-policy.min.js";
script.async = true;
document.body.appendChild(script);
}, []); return (
<div
name="termly-embed"
data-id="43904e5f-c5ed-4170-800a-74e5246a8675"
data-type="iframe"
></div>
);
}