Fügen Sie Socialjuice zu React oder Next.js hinzu
Behalten Sie die Einbettungs-URLs bei und laden Sie Browser-Skripte einmal in einer wiederverwendbaren Komponente.
Aktualisiert
Aktuelles Socialjuice-Dashboard mit Beispieldaten. Die Beschriftungen entsprechen der Sprache Ihres Dashboards.
Auf dieser Seite
Beginnen Sie mit Ihrem eigenen Snippet
Erstellen und speichern Sie das Widget in Website-Widgets oder kopieren Sie das Sammlungsformular-Snippet aus Sammlungsformulare. Behalten Sie alle URLs, Abfrageparameter, Space-IDs, Widget-IDs und Filter bei. Eine Beispiel-ID von einer anderen Website zeigt den Inhalt einer anderen Person an.
Erstellen Sie die Komponente
- Platzieren Sie den Iframe in einer Komponente an der vorgesehenen Stelle. Konvertieren Sie HTML-Attribute in React-Äquivalente, z. B. className undallowFullScreen. Geben Sie dem Iframe einen beschreibenden Titel.
- Behalten Sie die reine Browser-Initialisierung auf dem Client bei. Befolgen Sie in Next.js die Client-Komponenten- und Skriptkonventionen Ihres Projekts.
- Wenn das bereitgestellte Snippet einen Größenänderungshelfer verwendet, laden Sie dieses externe Skript einmal. Initialisieren Sie erst, nachdem sowohl der Hilfs- als auch der Ziel-Iframe vorhanden sind.
- Bereinigen Sie Größenänderungshandler, wenn die Bereitstellung der Komponente aufgehoben wird, und vermeiden Sie doppelte IDs oder Initialisierungen beim Navigieren zwischen Routen.
- Sorgen Sie dafür, dass der Frame innerhalb seines übergeordneten Elements reagiert. Behalten Sie für ein Bewertungsformular die bereitgestellten Kamera- und Mikrofonberechtigungen bei und verwenden Sie HTTPS.
Überprüfen Sie Navigation und Mobilgerät
Testen Sie das anfängliche Laden der Seite und die Navigation hin und her. Stellen Sie sicher, dass der Iframe nicht zweimal initialisiert wird und die Seite nicht horizontal scrollt. Ein Erfassungsformular sollte auch über einen normalen Link zum Öffnen in einem neuen Tab für Browser verfügen, die eingebettete Aufzeichnungen blockieren.
Verwenden Sie die Anweisungen zum Einbetten des Agenten im Dashboard und wählen Sie React/Next.js für eine Übergabe mit dem genauen Snippet. Installieren Sie keine Skripts für strukturierte Daten innerhalb des Iframes. Diese gehören zur Hostseite.