Добавьте живые комментарии на сайты Framer

Сначала откройте редактор вашего сайта.

В нашем примере мы будем добавлять FastComments на страницы нашего блога, но любой тип страницы также подойдёт.

Откройте редактор

Теперь давайте добавим блок Embed.

Перейдите в Insert в левом верхнем углу:

Нажмите Insert

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

Далее вам нужно нажать и перетащить блок Embed до конца вашего блога.

Важно нажать и перетащить, как показано, а не просто нажать. Если вы просто нажмёте, 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 // some providers change the code snippet to be 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

Или, в качестве альтернативы, вы можете использовать виджет Streaming Chat. Сниппет FastComments для Framer Streaming Chat выглядит так:

Сниппет 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 // some providers change the code snippet to be async

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 разработан так, чтобы его можно было настроить под ваш сайт.

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