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ń boczny pasek po lewej w dół i najedź kursorem na Utility.

Następnie chcesz kliknąć i przeciągnąć blok Utility na koniec swojego bloga.

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

Zlokalizuj widżet Embed

Przeciągnij i upuść widżet Embed

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

Otwórz ustawienia Embed

Teraz zmień typ widżetu Embed na HTML:

Ustaw jako widżet HTML

Teraz jesteś gotowy na fragment kodu FastComments dla Framer 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.