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 часто меняет фрагмент кода на асинхронный

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 систему живых комментариев.

Если вы столкнулись с ошибкой «доступ запрещён», или хотите настроить FastComments, читайте далее.

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

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