Add Live Commenting to Framer Sites

Najpierw otwórz edytor swojej witryny.

W naszym przykładzie dodamy FastComments do stron bloga, ale każdy rodzaj strony powinien działać.

Otwórz edytor

Teraz dodajmy blok Embed.

Przejdź do Insert w lewym górnym rogu:

Kliknij Insert

Następnie przewiń lewy pasek boczny w dół i najedź kursorem na Utility.

Następnie kliknij i przeciągnij blok Embed na koniec swojego bloga.

Ważne, aby kliknąć i przeciągnąć jak pokazano, a nie tylko kliknąć. Jeśli tylko klikniesz, Framer wstawi go poza blogiem i później będziesz musiał go przesuwać.

Zlokalizuj widget Embed

Przeciągnij i upuść widget Embed

Teraz będziesz mieć pusty widget Embed, a po jego zaznaczeniu pojawi się pasek boczny po prawej. Możesz rozwinąć pasek boczny i zobaczysz coś takiego:

Otwórz ustawienia Embed

Zmieńmy typ widgetu Embed na HTML:

Ustaw jako widget HTML

Teraz jesteś gotowy na fragment kodu FastComments dla Framera w następnym kroku.

Poniżej znajduje się fragment FastComments dla Framer Live Comments.

Specyficzny fragment komentarzy FastComments dla Framer

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 // niektórzy dostawcy zmieniają fragment kodu na asynchroniczny

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

Lub, alternatywnie, możesz użyć widżetu czatu strumieniowego. Fragment FastComments dla Framer — Streaming Chat — wygląda tak:

Specyficzny fragment czatu strumieniowego FastComments dla Framer

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 // niektórzy dostawcy zmieniają fragment kodu na asynchroniczny

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 obsługuje edytor Framer, więc po wklejeniu kodu powinieneś zobaczyć coś takiego (może być konieczne kliknięcie Publish):

Podgląd widżetu komentarzy

Po odwiedzeniu swojej strony powinieneś zobaczyć obszar komentarzy! W pasku bocznym Framer możesz też ustawić widżet na pełną szerokość, jeśli chcesz.

Zwróć uwagę, że Framer ogranicza wysokość widżetów i nie obsługuje automatycznego dopasowywania rozmiaru, więc wybraliśmy tutaj widżet Live Chat, ponieważ ma stałą wysokość.

Możemy poprawić pozycjonowanie widżetu, robiąc dwie rzeczy.

Po pierwsze, w lewym panelu ustaw wysokość widżetu na fill i 1fr:

Wysokość widżetu komentarzy

Następnie musimy poprawić domyślną konfigurację strony we Framerze. Domyślnie ustawia ona wysokość strony na stały rozmiar, co może obcinać wątki komentarzy. Dlatego ustawmy to również na fill.

Ustaw wysokość strony

Może być konieczne poeksperymentowanie z wysokością strony, aby ustawić ją tak, jak chcesz.

FastComments został zaprojektowany tak, aby można go było dostosować do wyglądu twojej strony.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Zobacz naszą dokumentację dotyczącą dostosowań i konfiguracji, aby dowiedzieć się, jak.