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, 'demo' уже должен быть заменён.

Чтобы виджет комментариев отображался правильно, нам нужно отрегулировать ширину HTML-элемента. Найдите вкладку Layout в редакторе свойств элемента.

Найдите настройку ширины

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

На вкладке Layout установите ширину 100%. Это гарантирует, что виджет комментариев займет всю ширину своего контейнера и корректно адаптируется к разным размерам экрана.

Установите ширину 100%

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

Также задайте минимальную высоту (например, 400px), чтобы убедиться, что виджет комментариев имеет достаточно места для корректного отображения.

После внесения этих изменений нажмите кнопку Preview, чтобы увидеть ваш виджет FastComments в действии!

Отличная работа! Вы добавили живые комментарии на свой сайт Bubble.io.

Если вы столкнулись с ошибкой permission denied или хотите настроить FastComments, читайте дальше.

FastComments разработан так, чтобы его можно было настроить в соответствии с вашим сайтом.

Если вы хотите добавить собственные стили или изменить конфигурацию, ознакомьтесь с нашей документацией по настройке и конфигурации, чтобы узнать, как.