Add Live Commenting to Framer Sites

Спочатку відкрийте редактор вашого сайту.

У нашому прикладі ми додаватимемо FastComments на сторінки блогу, але має працювати будь-який тип сторінки.

Відкрийте редактор

Тепер додамо блок Embed.

Перейдіть до Insert у верхньому лівому куті:

Натисніть Insert

Потім прокрутіть ліву бічну панель униз і наведіть курсор на Utility.

Далі потрібно клацнути й перетягнути блок Utility в кінець вашого блогу.

Важливо клацнути й перетягнути, як показано, а не просто клацнути. Якщо ви просто клацнете, Framer вставить його поза межами вашого блогу, і вам доведеться потім перетягувати його.

Знайдіть віджет Embed

Перетягніть віджет Embed

Тепер у вас буде порожній віджет Embed, і при його виборі з’явиться бічна панель праворуч. Ви можете розгорнути бічну панель, і ви побачите щось на кшталт цього:

Відкрийте налаштування Embed

Тепер змінимо тип віджета Embed на HTML:

Встановіть як HTML віджет

Тепер ви готові до фрагмента коду FastComments для Framer у наступному кроці.

Нижче наведено фрагмент FastComments для Framer Live Comments.

Фрагмент 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 підтримує редактор Framer, тож ви повинні побачити щось подібне після вставлення коду (можливо, доведеться натиснути Publish):

Попередній перегляд віджета коментарів

Тепер, коли ви переглядаєте свій сайт, ви повинні побачити область коментарів! У бічній панелі Framer ви також можете встановити віджет на повну ширину, якщо бажаєте.

Зауважте, що Framer обмежує висоту віджетів і не підтримує автоматичне змінення розміру, тому тут ми обрали віджет потокового чату, оскільки він має фіксовану висоту.

Ми можемо покращити позиціонування віджета, зробивши дві речі.

По-перше, у лівій панелі задайте висоту віджета як fill та 1fr:

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

Далі нам потрібно виправити конфігурацію сторінки Framer за замовчуванням. За замовчуванням вона задає фіксовану висоту сторінки, через що можуть обрізатися гілки коментарів. Тому давайте також встановимо це на fill.

Задати висоту сторінки

Можливо, доведеться поекспериментувати з висотою сторінки, щоб досягти бажаного результату.

FastComments створено так, щоб його можна було налаштувати під ваш сайт.

Якщо ви хочете додати власні стилі або змінити конфігурацію, Перегляньте нашу документацію з налаштування та конфігурації, щоб дізнатися, як.