Add Live Commenting to Framer Sites

С помощью FastComments мы можем легко добавить живые комментарии на любой сайт, созданный с помощью Framer.

В этом руководстве мы рассмотрим только установку виджета Live Commenting. Если вам нужна помощь при установке других виджетов, или настройке SSO, не стесняйтесь создать заявку в службу поддержки.

Шаг 1: Откройте редактор

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

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

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

Шаг 2: Добавьте блок вставки

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

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

Нажмите Insert

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

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

Важно именно щелкнуть и перетащить, как показано, а не просто щелкнуть. Если вы просто щелкнете, Framer вставит его вне вашего блога и вам придётся перемещать его позже.

Найдите виджет Embed

Перетащите виджет Embed

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

Откройте настройки Embed

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

Установите как HTML-виджет

Теперь вы готовы к фрагменту кода FastComments для Framer на следующем шаге.

Шаг 3: Скопируйте и вставьте код FastComments для Framer

Ниже приведён фрагмент FastComments для Framer Live Comments.

Фрагмент FastComments для Framer — Комментарии

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // некоторые провайдеры изменяют сниппет кода, делая его асинхронным
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

Фрагмент FastComments для Framer — Streaming Chat

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // некоторые провайдеры изменяют сниппет кода, делая его асинхронным
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

FastComments поддерживает редактор Framer, поэтому после вставки кода вы должны увидеть нечто подобное (возможно, потребуется нажать Publish):

Предпросмотр виджета комментариев

Теперь при просмотре вашего сайта вы должны увидеть область комментариев! В боковой панели Framer вы также можете при желании установить виджет на полную ширину.

Обратите внимание, что Framer ограничивает высоту виджетов и не поддерживает авторазмер, поэтому здесь мы выбрали виджет Live Chat, так как он имеет фиксированную высоту.

Шаг 4: Отрегулируйте высоту виджета и страницы

Мы можем улучшить позиционирование виджета, сделав две вещи.

First, on the left pane, set the widget's height to fill and 1fr:

Высота виджета комментариев

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

Задать высоту страницы

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

Ошибки домена

Вы можете получить ошибку авторизации, похожую на следующую:

Конфигурация домена отсутствует

Это происходит потому, что FastComments не знает, что ваш аккаунт должен быть разрешён для использования на этом домене.

В этом случае исправление простое. Вам нужно просто добавить ваш сайт в аккаунт FastComments.com.

Перейдите сюда, чтобы добавить ваш сайт в аккаунт.

Настройка

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

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

Язык 🇷🇺 Русский