Termly propose trois façons pratiques d’intégrer une politique sur votre site React. Dans ce guide, nous allons nous concentrer sur la création d’un composant réutilisable en utilisant la méthode du fragment de code, qui vous permet d’intégrer dynamiquement la politique directement sur votre page.

Vos options incluent :

• Format HTML : Collez du HTML statique directement sur votre site web

• URL : Lien vers une URL hébergée par Termly

• Fragment de code : Intégrez la politique sur votre page en utilisant un fragment de code

En savoir plus sur les différences entre chaque méthode

Utilisation de la méthode du fragment de code

Pour intégrer une politique Termly en utilisant l’option fragment de code sur une page React, vous pouvez utiliser le hook useEffect et la fonction createElement du package React. Cette approche vous permet de créer un élément script et de l’ajouter dynamiquement à la page.

Voici un guide étape par étape :

1. Créez un nouveau composant : Nommez-le « Policy » ou tout autre nom approprié.

2. Importez les dépendances nécessaires : Vous devrez importer React et useEffect depuis le package React.

3. Utilisez le hook useEffect : À l’intérieur du composant, utilisez le hook useEffect pour créer un élément script et l’ajouter au corps du document.

4. Définissez la source du script : La source doit pointer vers le script d’intégration de politique de Termly.

5. Ajoutez l’identifiant de données : Modifiez la valeur de data-id avec l’identifiant spécifique au document que vous intégrez. Le data-id est indiqué dans le fragment de code que vous exportez depuis Termly.

Voici un exemple :

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