Add Live Commenting to Framer Sites

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

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

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

Сада, додајмо блок Embed.

Go to Insert in the top left:

Кликните Insert

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

Next you'll want to click and drag the Embed block to the end of your blog.

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

Пронађите Embed Widget

Повуците и отпустите Embed Widget

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

Отворите Embed Settings

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

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

Сада сте спремни за 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 је дизајниран да се прилагоди вашем сајту.

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