Add Live Commenting to Bubble.io Sites

Zuerst navigieren Sie zu der Seite/dem Layout, auf der/dem Sie FastComments hinzufügen möchten. Ziehen Sie im Bubble-Editor ein HTML-Element aus der Seitenleiste Visual Elements auf Ihre Seite.

HTML-Element hinzufügen

Das HTML-Element ermöglicht es uns, das FastComments-Widget direkt in Ihre Bubble-App einzubetten.

Klicken Sie auf das HTML-Element, das Sie gerade hinzugefügt haben. Fügen Sie im daraufhin erscheinenden Eigenschaftseditor den folgenden Code in das HTML-Feld ein:

Bubble.io Live-Kommentar-Code-Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // Bubble neigt dazu, den Code-Snippet in asynchronen Code zu ändern

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

FastComments-Code einfügen

Hinweis: Dieser Code enthält einen Wiederholungsmechanismus, um sicherzustellen, dass FastComments in der dynamischen Umgebung von Bubble korrekt geladen wird. Andere Code-Snippets funktionieren nicht.

Denken Sie daran, 'demo' nach der Anmeldung durch Ihre tatsächliche FastComments-Tenant-ID zu ersetzen. Wenn Sie bei FastComments.com angemeldet sind, sollte es bereits ersetzt worden sein.

Damit das Kommentar-Widget korrekt angezeigt wird, müssen wir die Breite des HTML-Elements anpassen. Suchen Sie im Eigenschaftseditor des Elements die Registerkarte "Layout".

Breiteneinstellung finden

Die Registerkarte "Layout" enthält wichtige Größenoptionen, die unserem Kommentar-Widget helfen, auf verschiedenen Bildschirmgrößen korrekt angezeigt zu werden.

Im Tab Layout stellen Sie die Breite auf 100%. Dadurch nimmt das Kommentar-Widget die volle Breite seines Containers ein und passt sich korrekt an verschiedene Bildschirmgrößen an.

Auf 100% setzen

Nachdem Sie den Eingabewert auf 100 (oder den gewünschten Prozentsatz) geändert haben, müssen Sie das Dropdown neben der Zahl anklicken, um es von Pixeln in Prozent zu ändern.

Stellen Sie außerdem eine Mindesthöhe ein (z. B. 400px), um sicherzustellen, dass das Kommentar-Widget genügend Platz hat, um korrekt angezeigt zu werden.

Nachdem Sie diese Änderungen vorgenommen haben, klicken Sie auf die Vorschau-Schaltfläche, um Ihr FastComments-Widget in Aktion zu sehen!

Gut gemacht! Sie haben die Live-Kommentarfunktion auf Ihrer Bubble.io-Website hinzugefügt.

Wenn Sie auf einen 'permission denied'-Fehler gestoßen sind oder FastComments anpassen möchten, lesen Sie weiter.

FastComments ist so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Styles hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Dokumentation zur Anpassung an, um zu erfahren, wie.