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 snippet is below.

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-специфичан фрагмент за стриминг чет

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 supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

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

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat widget here since it is fixed height.

Можемо побољшати позиционирање видгета на два начина.

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

Висина коментарског видгета

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off ните коментара. Зато хајде да и то подесимо на fill.

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

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

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

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