Add Live Commenting to Framer Sites

Прво отворите уређивач свог сајта.

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

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

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

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

Кликните на Insert

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

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

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

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

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

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

Отворите поставке Embed-а

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

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

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

The Framer Live Comments FastComments исјечак је испод.

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 // неки провајдери мењају исјечак кода да буде асинхроно

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-специфични исјечак за 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 // неки провајдери мењају исјечак кода да буде асинхроно

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 конфигурацију странице. По подразумевaњу она поставља висину странице на фиксну величину, што може одсјечи нитове коментара. Стога подесимо и ово на fill.

Поставите висину странице

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

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

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