All Collections
Policies
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 = "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>
  );
}
Did this answer your question?