Termly bietet drei praktische Möglichkeiten, eine Richtlinie in Ihre React-Website einzubetten. In dieser Anleitung konzentrieren wir uns auf die Erstellung einer wiederverwendbaren Komponente mit der Code-Snippet-Methode, die es Ihnen ermöglicht, die Richtlinie direkt auf Ihrer Seite dynamisch einzubetten.
Ihre Optionen umfassen:
-
HTML-Format: Fügen Sie statisches HTML direkt in Ihre Website ein
-
URL: Link zu einer von Termly gehosteten URL
-
Codeschnipsel: Binden Sie die Richtlinie mithilfe eines Codeschnipsels in Ihre Seite ein
Erfahren Sie mehr über die Unterschiede zwischen den einzelnen Methoden
Verwendung der Code-Snippet-Methode
Um eine Termly-Richtlinie mithilfe der Code-Snippet-Option in eine React-Seite einzubetten, können Sie den useEffect
-Hook und die createElement
-Funktion aus dem React-Paket verwenden. Mit diesem Ansatz können Sie ein Skript-Element erstellen und es dynamisch zur Seite hinzufügen.
Hier ist eine Schritt-für-Schritt-Anleitung:
-
Erstellen Sie eine neue Komponente: Nennen Sie sie 'Policy' oder einen anderen geeigneten Namen.
-
Importieren Sie die notwendigen Abhängigkeiten: Sie müssen
React
unduseEffect
aus dem React-Paket importieren. -
Verwenden Sie den
useEffect
Hook: Verwenden Sie innerhalb der Komponente denuseEffect
Hook, um ein Skriptelement zu erstellen und es an den Körper des Dokuments anzuhängen. -
Setzen Sie die Skriptquelle: Die Quelle sollte auf das Skript der Einbettungsrichtlinie von Termly zeigen.
-
Add the Data ID: Ändern Sie den Wert von
data-id
auf die spezifische data-id für das einzubettende Dokument. DieDaten-ID
ist in dem aus Termly exportierten Codeschnipsel aufgeführt.
Hier ein Beispiel:
import React, { useEffect } from "react";exportiere Standardfunktion 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>
);
}