Live-Kommentare zu Framer-Websites hinzufügen

Öffnen Sie zuerst den Editor für Ihre Website.

In unserem Beispiel fügen wir FastComments unseren Blog-Seiten hinzu, aber jeder Seitentyp sollte funktionieren.

Editor öffnen

Fügen wir jetzt einen Embed-Block hinzu.

Gehen Sie links oben zu Insert:

Klicken Sie auf Insert

Scrollen Sie dann die linke Seitenleiste nach unten und fahren Sie mit der Maus über Utility.

Als Nächstes sollten Sie den Embed-Block anklicken und ziehen ans Ende Ihres Blogs.

Wichtig ist, dass Sie wie gezeigt anklicken und ziehen und ihn nicht nur anklicken. Wenn Sie ihn nur anklicken, fügt Framer ihn außerhalb Ihres Blogs ein und Sie müssen ihn später verschieben.

Embed-Widget finden

Embed-Widget per Drag & Drop ziehen und ablegen

Nun haben Sie ein leeres Embed-Widget, und wenn Sie es auswählen, erhalten Sie eine Seitenleiste auf der rechten Seite. Sie können die Seitenleiste erweitern, und Sie sehen so etwas:

Embed-Einstellungen öffnen

Ändern wir nun den Typ des Embed-Widgets zu HTML:

Als HTML-Widget festlegen

Jetzt sind Sie bereit für den FastComments Framer-Code-Snippet im nächsten Schritt.

Das FastComments-Snippet für Framer Live Comments finden Sie unten.

FastComments Framer-spezifisches Kommentare-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 // some providers change the code snippet to be async

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

Alternativ können Sie auch das Streaming-Chat-Widget verwenden. Das FastComments-Snippet für Framer Streaming Chat lautet:

FastComments Framer-spezifisches Streaming-Chat-Snippet

Copy

1

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

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

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // some providers change the code snippet to be async

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

FastComments unterstützt den Framer-Editor, daher sollten Sie nach dem Einfügen des Codes etwa Folgendes sehen (möglicherweise müssen Sie auf Publish klicken):

Vorschau des Kommentar-Widgets

Wenn Sie nun Ihre Website aufrufen, sollten Sie den Kommentarbereich sehen! In der Seitenleiste von Framer können Sie das Widget bei Bedarf auch auf die volle Breite einstellen.

Beachten Sie, dass Framer die Höhe von Widgets begrenzt und keine automatische Größenanpassung unterstützt. Daher haben wir uns hier für das Live-Chat-Widget entschieden, da es eine feste Höhe hat.

Wir können die Positionierung des Widgets durch zwei Maßnahmen verbessern.

Zuerst legen Sie im linken Bereich die Höhe des Widgets auf fill und 1fr fest:

Höhe des Kommentar-Widgets

Als Nächstes müssen wir die Standardkonfiguration der Framer-Seite korrigieren. Standardmäßig legt sie die Seitenhöhe auf eine feste Größe fest, was abschneiden kann Kommentar-Threads. Daher setzen wir diese ebenfalls auf fill.

Seitenhöhe festlegen

Möglicherweise müssen Sie mit der Seitenhöhe experimentieren, um sie so einzustellen, wie Sie es wünschen.

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

Wenn Sie benutzerdefiniertes Styling hinzufügen oder die Konfiguration anpassen möchten, Sehen Sie sich unsere Anpassungsdokumentation an, um zu erfahren, wie.