Add Live Chat to ClickFunnels Courses

В этом руководстве мы рассмотрим настройку FastComments Streaming Chat для курса ClickFunnels. Мы также добавим фрагмент кода в конце для Live Commenting, если вы хотите вместо этого использовать его.

Обратите внимание, что это руководство предназначено для модуля Course, но шаги аналогичны для добавления комментариев к записям блога и страницам (просто отредактируйте соответствующий шаблон).

Мы также кратко рассмотрим настройку автоматических комментариев, чтобы стимулировать вовлечение пользователей.

Обратите внимание, что для этого руководства требуется учетная запись FastComments. Рекомендуется сначала зарегистрироваться, а затем вернуться сюда. Вы можете создать аккаунт здесь.

Шаг 1: Найдите шаблон

Сначала нам нужно открыть редактор шаблонов ClickFunnels. Для курсов это делается путем открытия курса и нажатия Customize в правом верхнем углу:

Настроить

Перейдите в Templates:

Открыть шаблоны

Курсы состоят из различных шаблонов. Нам нужно отображать комментарии на уроках, поэтому выберите Default Lesson Page (например):

Выберите шаблон

Вот и всё! Теперь вы готовы ко второму шагу.

Шаг 2: Добавьте код

Теперь, когда мы в редакторе шаблонов, нам нужно решить, где мы хотим отображать комментарии или чат в реальном времени.

В этом примере мы добавим его прямо под видео. Наведите курсор на элемент, в конец которого вы хотите добавить виджет, и нажмите ADD ELEMENT:

Добавить элемент

Выберите CUSTOM JS/HTML:

Выберите CUSTOM JS/HTML

Теперь давайте откроем редактор кода, куда мы вставим наш код.

На следующем шаге ClickFunnels может ввести в заблуждение.

Важно, чтобы вы НИ В КОЕМ СЛУЧАЕ не выбирали Code при наведении курсора на новый элемент. Вместо этого выберите SETTINGS:

Выберите SETTINGS

Теперь с правой стороны мы можем нажать Open Code Editor:

Нажмите Open Code Editor

Вы увидите большое окно. Здесь мы можем вставить наш код. Скопируйте следующий фрагмент (используйте кнопку копирования в правом верхнем углу):

Фрагмент кода ClickFunnels для потокового чата

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 500px;min-height: 780px;"></div>
<style>
    #fastcomments-live-chat-widget iframe {
        min-height: 780px;
    }
</style>
<script>
    (function fcLoad() {
        function tryLoad() {
            // некоторые провайдеры изменяют фрагмент кода на async
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo'
            });
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Этот фрагмент кода предназначен для нашего продукта Streaming Chat, который хорошо подходит для видео. Если вы хотите вместо него фрагмент кода виджета Live Commenting, который лучше подходит для обычных страниц или блогов, он находится в конце этого руководства.

Когда мы вставим фрагмент кода в окно, он должен выглядеть так:

Вставить код

Теперь нам осталось просто закрыть окно:

Закрыть

Теперь вы можете просмотреть свои изменения! Не стесняйтесь перемещать виджет и посмотреть, где он вам больше нравится.

Предпросмотр

Успешно! Не забудьте протестировать мобильную версию!

Успешно!

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

Вам может быть показана ошибка авторизации, например:

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

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

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

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

Настройка

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

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

Дополнительно: фрагмент кода для живых комментариев

Если вы ищете фрагмент кода для ClickFunnels Live Commenting, попробуйте этот:

Фрагмент кода ClickFunnels Live Commenting

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="min-width: 500px;min-height: 780px;"></div>
<style>
    #fastcomments-widget iframe {
        min-height: 780px;
    }
</style>
<script>
    (function fcLoad() {
        function tryLoad() {
            // некоторые провайдеры меняют фрагмент кода на асинхронный
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo'
            });
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Дополнительно: автоматическое воспроизведение комментариев

FastComments поддерживает функцию под названием Auto Play. Это позволяет вам импортировать CSV с комментариями и запланировать их воспроизведение в определённые моменты, основанные на часах, минутах и секундах от времени загрузки страницы.

Она также автоматически добавляет любые опубликованные комментарии обратно в autoplay script в нужное время, так что ваш видеоскрипт растёт с каждым вебинаром без какой-либо ручной работы.

В настоящее время эта функция включена во все планы FastComments.

Узнайте больше о запланированных комментариях здесь

Примечание!

Помните, что столбец URL ID в CSV файле должен соответствовать URL курса/видео.

Установка ClickFunnels

Фрагмент кода для живых комментариев

Автоматическое воспроизведение комментариев

Add Live Chat to ClickFunnels Courses

Шаг 1: Найдите шаблон

Шаг 2: Добавьте код

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

Настройка

Дополнительно: фрагмент кода для живых комментариев

Дополнительно: автоматическое воспроизведение комментариев

Примечание!

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

Установка ClickFunnels

Фрагмент кода для живых комментариев

Автоматическое воспроизведение комментариев

Add Live Chat to ClickFunnels Courses

Шаг 1: Найдите шаблон

Шаг 2: Добавьте код

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

Настройка

Дополнительно: фрагмент кода для живых комментариев

Дополнительно: автоматическое воспроизведение комментариев

Примечание!