Termly ofrece tres formas convenientes de incrustar una política en su sitio web React. En esta guía, nos centraremos en crear un componente reutilizable utilizando el método del fragmento de código, que le permite incrustar dinámicamente la política directamente en su página.

Sus opciones incluyen:

• Formato HTML: Pegue HTML estático directamente en su sitio web

• URL: Enlace a una URL alojada por Termly

• Fragmento de código: Incruste la política en su página usando un fragmento de código

Aprenda más sobre las diferencias entre cada método

Usando el método del fragmento de código

Para incrustar una política de Termly usando la opción de fragmento de código en una página React, puede utilizar el hook useEffect y la función createElement del paquete React. Este enfoque le permite crear un elemento script y agregarlo a la página dinámicamente.

Aquí tiene una guía paso a paso:

1. Cree un nuevo componente: Nómbralo ‘Policy’ o cualquier otro nombre adecuado.

2. Importe las dependencias necesarias: Necesitará importar React y useEffect del paquete React.

3. Use el hook useEffect: Dentro del componente, use el hook useEffect para crear un elemento script y añadirlo al cuerpo del documento.

4. Establezca la fuente del script: La fuente debe apuntar al script de política incrustada de Termly.

5. Agregue el ID de datos: Cambie el valor de data-id al data-id específico del documento que está incrustando. El data-id se encuentra en el fragmento de código que exporta desde Termly.

Aquí tiene un ejemplo:

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>
  );
}