Dodajte komentiranje uživo na Framer stranice

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 ćemo dodati blok Embed.

Idite na Insert u gornjem lijevom kutu:

Kliknite Insert

Zatim skrolajte bočnu traku s lijeve strane prema dolje i postavite pokazivač miša iznad Utility.

Sljedeće, želite kliknuti i povući blok Embed do kraja vašeg 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 morat ćete ga naknadno premještati.

Pronađite Embed Widget

Povucite i ispustite Embed Widget

Sada ćete imati prazni Embed widget, a kad 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.

FastComments Framer Live Comments isječak nalazi se u nastavku.

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 // some providers change the code snippet to be async

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 Framer Streaming Chat isječak je:

FastComments Framer-Specifični Streaming Chat Isječak

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 // some providers change the code snippet to be async

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 vidjeti nešto poput ovoga nakon što zalijepite kod (možda ćete morati kliknuti Publish):

Pregled Widgeta za Komentare

Sada kada pogledate svoju web stranicu, trebali biste vidjeti područje za komentare! U bočnoj traci Framer-a možete, ako želite, postaviti widget i na punu širinu.

Imajte na umu da Framer ograničava visinu widgeta i ne podržava automatsku promjenu 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.