Add Live Commenting to Framer Sites

Prvo, otvorite uređivač za vaš sajt.

U našem primjeru ćemo dodavati FastComments na stranice našeg bloga, ali bilo koji tip stranice bi trebao raditi.

Otvorite uređivač

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

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

Кликните на Insert

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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