Termly offre tre modi comodi per incorporare una policy nel tuo sito web React. In questa guida, ci concentreremo sulla creazione di un componente riutilizzabile utilizzando il metodo dello snippet di codice, che ti permette di incorporare dinamicamente la policy direttamente nella tua pagina.

Le tue opzioni includono:

• Formato HTML: Incolla HTML statico direttamente sul tuo sito web

• URL: Collega a un URL ospitato da Termly

• Snippet di codice: Incorpora la policy nella tua pagina usando uno snippet di codice

Scopri di più sulle differenze tra ogni metodo

Utilizzo del metodo dello snippet di codice

Per incorporare una policy di Termly usando l'opzione snippet di codice in una pagina React, puoi utilizzare l'hook useEffect e la funzione createElement dal pacchetto React. Questo approccio ti permette di creare un elemento script e aggiungerlo dinamicamente alla pagina.

Ecco una guida passo passo:

1. Crea un nuovo componente: Chiamalo ‘Policy’ o con un altro nome adatto.

2. Importa le dipendenze necessarie: Dovrai importare React e useEffect dal pacchetto React.

3. Usa l'hook useEffect: All'interno del componente, usa l'hook useEffect per creare un elemento script e aggiungerlo al body del documento.

4. Imposta la sorgente dello script: La sorgente deve puntare allo script di embed policy di Termly.

5. Aggiungi il Data ID: Cambia il valore di data-id con il data-id specifico per il documento che stai incorporando. Il data-id è elencato nello snippet di codice che esporti da Termly.

Ecco un esempio:

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