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 // някои доставчици променят фрагмента с кода, за да бъде async

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 // някои доставчици променят фрагмента с кода, за да бъде async

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 е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да настроите конфигурацията, Прегледайте нашата документация за персонализиране, за да научите как.