Dodajte komentarisanje u realnom vremenu na Framer sajtove

Прво, отворите уређивач за ваш сајт.

У нашем примеру додаћемо FastComments на странице нашег Блога, али било који тип странице би требало да ради.

Отворите уређивач

Сада ћемо додати Embed блок.

Идите на Insert у горњем левом углу:

Кликните на Insert

Затим скролујте леву бочну траку надоле и померите курсор преко Utility.

Даље, желећете да кликнете и превучете Embed блок до краја вашег блога.

Важно је да кликнете и превучете како је приказано, а не само да кликнете. Ако само кликнете, Framer ће га уметнути ван вашег блога и касније ћете морати да га померате.

Пронађите Embed виџет

Превуците и испустите Embed виџет

Сада ћете имати празан Embed виџет, и када га изаберете добићете бочну траку на десној страни. Можете проширити бочну траку и видећете нешто овако:

Отворите подешавања Embed

Сада ћемо променити тип Embed виџета у HTML:

Поставите као HTML виџет

Сада сте спремни за FastComments Framer кодни исечак у следећем кораку.

FastComments исечак за Framer Live Comments је приказан испод.

FastComments 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 // 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

Или, алтернативно, можете користити Streaming Chat виџет. FastComments исечак за Framer Streaming Chat је:

FastComments Framer-специфични исечак за 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 // 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 подржава Framer едитор, тако да би требало да видите нешто овако када налепите код (можда ћете морати да кликнете Publish):

Преглед виџета за коментаре

Сада када погледате свој сајт, требало би да видите област за коментаре! У бочној траци Framer-а можете, ако желите, поставити и виџет на пуну ширину.

Имајте у виду да Framer ограничава висину виџета и не подржава аутоматску промену величине, па смо овде изабрали Live Chat виџет јер има фиксну висину.

Можемо побољшати позиционирање виџета тако што ћемо урадити две ствари.

Прво, у левом панелу, поставите висину виџета на fill и 1fr:

Висина виџета за коментаре

Затим морамо да исправимо подразумевану конфигурацију Framer странице. Подразумевано она поставља висину странице на фиксну величину, што може да одсече нити коментара. Дакле, поставимо и ово на fill.

Постављање висине странице

Можда ћете морати да експериментишете са висином странице да бисте је подесили како желите.

FastComments је дизајниран да буде прилагођен како би одговарао вашем сајту.

Ако желите да додате прилагођени стил или да подесите конфигурацију, Погледајте нашу документацију о прилагођавању да бисте сазнали како.