Add Live Commenting to Framer Sites

Ö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 nun einen Embed-Block hinzu.

Gehen Sie zu Insert oben links:

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 Utility-Block anklicken und ziehen bis ans Ende Ihres Blogs.

Es ist wichtig, dass Sie wie gezeigt anklicken und ziehen und ihn nicht nur anklicken. Wenn Sie ihn nur anklicken, wird Framer ihn außerhalb Ihres Blogs einfügen und Sie müssen ihn später verschieben.

Embed-Widget finden

Embed-Widget ziehen und ablegen

Jetzt 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 sowas in der Art:

Embed-Einstellungen öffnen

Ändern wir nun den Embed-Widgettyp zu HTML:

Als HTML-Widget festlegen

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

The Framer Live Comments FastComments snippet is below.

FastComments Framer-spezifisches Kommentarsnippet

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 // Einige Anbieter ändern das Code-Snippet so, dass es asynchron ist

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

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

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 // Einige Anbieter ändern das Code-Snippet so, dass es asynchron ist

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 supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

Vorschau des Kommentar-Widgets

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat widget here since it is fixed height.

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.