Add Live Commenting to Framer Sites

Prvo, otvorite editor za vaš sajt.

U našem primeru ćemo dodati FastComments na stranice našeg bloga, ali bilo koja vrsta stranice bi trebalo da radi.

Otvorite editor

Sada ćemo dodati Embed blok.

Idite na Insert u gornjem levom uglu:

Click Insert

Zatim spustite levi bočni meni i pređite mišem preko Utility.

Sledeće, treba da kliknete i prevučete Utility blok do kraja vašeg bloga.

Važno je da kliknete i prevučete kako je prikazano, a ne samo da kliknete. Ako samo kliknete, Framer će ga ubaciti van vašeg bloga i moraćete kasnije da ga pomerate.

Locate Embed Widget

Drag and Drop Embed Widget

Sada ćete imati prazan Embed widget, i kada ga izaberete dobićete bočni meni sa desne strane. Možete proširiti bočni meni, i videćete nešto ovako:

Open Embed Settings

Sada hajde da promenimo tip Embed widget-a u HTML:

Set as HTML Widget

Sada ste spremni za FastComments Framer Code snippet u sledećem koraku.

Ispod se nalazi FastComments snippet za Framer Live Comments.

FastComments Framer-specifičan snippet komentara

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 // neki provajderi menjaju snippet koda tako da bude asinhron

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

Ili, alternativno, možete koristiti Streaming Chat widget. FastComments snippet za Framer Streaming Chat je:

FastComments Framer-specifičan snippet za Streaming Chat

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 // neki provajderi menjaju snippet koda tako da bude asinhron

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 podržava Framer editor, tako da biste trebali videti nešto ovako nakon što nalepite kod (možda ćete morati kliknuti Publish):

Pregled widgeta za komentare

Sada kad pregledate svoj sajt trebalo bi da vidite deo za komentare! U bočnoj traci Framera možete, ako želite, postaviti widget da bude pune širine.

Imajte na umu da Framer ograničava visinu widgeta i ne podržava automatsko prilagođavanje veličine, zato smo ovde izabrali Live Chat widget jer ima fiksnu visinu.

Možemo poboljšati pozicioniranje widgeta na dva načina.

Prvo, u levom panelu, podesite visinu widgeta na fill i 1fr:

Visina widgeta za komentare

Zatim treba da popravimo podrazumevanu Framer konfiguraciju stranice. Podrazumevano postavlja visinu stranice na fiksnu veličinu, što može odseći niti komentara. Zato i ovo postavimo na fill.

Podesite visinu stranice

Možda ćete morati da eksperimentišete sa visinom stranice dok ne bude onakva kakvu želite.

FastComments je dizajniran da se prilagodi vašem sajtu.

Ako želite da dodate prilagođeni stil ili podesite konfiguraciju, Pogledajte našu dokumentaciju o prilagođavanju da saznate kako.