Додати живі коментарі до сайтів Framer

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

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

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

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

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

Натисніть Insert

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

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

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

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

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

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

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

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

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

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

Фрагмент FastComments для живих коментарів у Framer наведено нижче.

Фрагмент коментарів 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 Streaming Chat для 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 створено так, щоб його можна було налаштувати під ваш сайт.

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