Add Live Commenting to Framer Sites

Prvo otvorite uređivač za vašu stranicu.

U našem primjeru dodati ćemo FastComments na stranice našeg bloga, ali bilo koja vrsta stranice trebala bi funkcionirati.

Otvorite uređivač

Sada dodajmo Embed blok.

Idite na Insert u gornjem lijevom kutu:

Kliknite Insert

Zatim skrolajte lijevu bočnu traku prema dolje i zadržite pokazivač miša iznad Utility.

Sljedeće ćete htjeti kliknuti i povući Utility blok na kraj svog bloga.

Važno je da kliknete i povučete kako je prikazano, a ne samo kliknete. Ako ga samo kliknete, Framer će ga umetnuti izvan vašeg bloga i kasnije ćete ga morati premještati.

Pronađite Embed Widget

Povucite i ispustite Embed Widget

Sada ćete imati prazan Embed widget, i kada ga odaberete dobit ćete bočnu traku s desne strane. Možete proširiti bočnu traku i vidjet ćete nešto poput ovoga:

Otvorite postavke Embed

Sada promijenimo tip Embed widgeta u HTML:

Postavite kao HTML Widget

Sada ste spremni za FastComments Framer isječak koda u sljedećem koraku.

Ispod se nalazi FastComments isječak za Framer Live Comments.

FastComments Framer-specifični isječak 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 pružatelji mijenjaju isječak koda tako da je 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

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

FastComments Framer-specifični isječak za razgovor uživo

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 pružatelji mijenjaju isječak koda tako da je 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, pa biste trebali vidjeti nešto slično nakon što zalijepite kod (možda ćete morati kliknuti Publish):

Pregled widgeta komentara

Sada, kada pregledate svoju stranicu, trebali biste vidjeti područje za komentare! U bočnoj traci Framera također možete postaviti widget da bude pune širine, ako želite.

Imajte na umu da Framer ograničava visinu widgeta i ne podržava automatsko mijenjanje veličine, pa smo ovdje odabrali Live Chat widget jer ima fiksnu visinu.

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

Prvo, u lijevom panelu, postavite visinu widgeta na fill i 1fr:

Visina komentarskog widgeta

Sljedeće moramo popraviti zadanu Framer konfiguraciju stranice. Po zadanim postavkama postavlja visinu stranice na fiksnu veličinu, što može odsjeći niti komentara. Zato i to postavimo na fill.

Postavite visinu stranice

Možda ćete morati poigrati se visinom stranice da je dovedete onakvom kakvu želite.

FastComments je dizajniran da se prilagodi vašoj stranici.

Ako želite dodati prilagođeni izgled ili podesiti konfiguraciju, Pogledajte našu dokumentaciju o prilagodbama i konfiguraciji kako biste saznali kako.