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.

Даље, морате кликнути и превући 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

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

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