Add Live Commenting to Bubble.io Sites

Спочатку перейдіть на сторінку/макет, куди ви хочете додати FastComments. У редакторі Bubble перетягніть елемент HTML з бічної панелі Visual Elements на вашу сторінку.

Додати елемент HTML

Елемент HTML дозволить нам вбудувати віджет FastComments безпосередньо у ваш додаток Bubble.

Клацніть на HTML-елементі, який ви щойно додали. У редакторі властивостей, що з'явиться, вставте наступний код у поле HTML:

Код вставки живих коментарів Bubble.io

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 // Bubble часто змінює фрагмент коду на 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

Вставте код FastComments

Примітка: цей код містить механізм повторних спроб, щоб гарантувати правильне завантаження FastComments у динамічному середовищі Bubble. Інші фрагменти коду не працюватимуть.

Пам'ятайте замінити 'demo' на ваш фактичний FastComments tenant ID після реєстрації. Якщо ви ввійшли в FastComments.com, він має бути вже замінений.

Щоб забезпечити правильне відображення віджета коментарів, нам потрібно відрегулювати ширину HTML-елемента. Знайдіть вкладку Layout у редакторі властивостей елемента.

Знайти налаштування ширини

Вкладка Layout містить важливі параметри розмірів, які допоможуть нашому віджету коментарів коректно відображатися на екранах різних розмірів.

На вкладці Layout встановіть ширину 100%. Це гарантує, що віджет коментарів займатиме повну ширину свого контейнера й правильно реагуватиме на різні розміри екрана.

Встановіть ширину 100%

Після зміни значення вводу на 100 (або бажаний відсоток) вам потрібно буде натиснути випадаюче меню поруч із числом, щоб змінити одиниці з пікселів на відсотки.

Також встановіть мінімальну висоту (наприклад, 400px), щоб переконатися, що віджет коментарів має достатньо місця для коректного відображення.

Після внесення цих змін натисніть кнопку Preview, щоб побачити ваш віджет FastComments у дії!

Чудова робота! Ви додали коментування в реальному часі на свій сайт Bubble.io.

Якщо ви зіткнулися з помилкою 'permission denied', або хочете налаштувати FastComments, читайте далі.

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

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