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
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
ReactunduseEffectaus dem React-Paket importieren.Verwenden Sie den
useEffectHook: Verwenden Sie innerhalb der Komponente denuseEffectHook, 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-idauf die spezifische data-id für das einzubettende Dokument. DieDaten-IDist 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>
);
}