Add Live Commenting to Framer Sites

Първо, отворете редактора за вашия сайт.

В нашия пример ще добавим FastComments към страниците на нашия блог, но трябва да работи с всеки тип страница.

Отворете редактора

Сега нека добавим Embed блок.

Go to Insert in the top left:

Кликнете върху Insert

Then scroll the left hand sidebar down and mouse over Utility.

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

It's important you click and drag as shown, and not just click it. If you just click it, then Framer will insert it извън вашия блог и ще трябва да го преместите по-късно.

Намерете Embed Widget

Плъзнете и пуснете Embed Widget

Now you'll have an empty Embed widget, and when you select it you'll get a sidebar on the right. You can expand the sidebar, and you'll see something like this:

Отворете настройките на Embed

Now let's change the Embed widget type to HTML:

Задайте като HTML уиджет

Now you're ready for the FastComments Framer Code snippet in the next step.

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

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