Add Live Commenting to Framer Sites

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

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

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

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

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

Открыть редактор

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

Давайте добавим блок Embed.

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

Нажмите Insert

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

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

Важно щелкнуть и перетащить, как показано, а не просто кликнуть. Если вы просто кликните, то 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 — чат в реальном времени

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: Отрегулируйте высоту виджета и страницы

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

Во-первых, на левой панели установите высоту виджета на fill и 1fr:

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

Далее нам нужно исправить стандартную конфигурацию страницы Framer. По умолчанию она задаёт высоту страницы фиксированным размером, что может обрезать ветки комментариев. Поэтому давайте также установим её в fill.

Установите высоту страницы

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

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

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

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

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

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

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

Настройка

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

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

Язык 🇺🇦 Русский (Украина)