Add Live Chat to ClickFunnels Courses

在本教程中，我们将介绍如何将 FastComments Streaming Chat 与 ClickFunnels 课程配置。我们还将在文末添加一个用于 Live Commenting 的代码片段，以防您想改用该功能。

请注意，本教程针对的是课程模块，但将评论添加到博客文章和页面的步骤类似（只需编辑相应的模板）。

我们还会简要介绍如何设置自动评论，以帮助鼓励用户参与。

请注意，本教程需要 FastComments 帐户。建议您先注册，然后再回来继续本教程。您可以在此创建帐户。

第一步：查找模板

首先，我们需要打开 ClickFunnels 模板编辑器。对于课程，请打开课程并在右上角单击 Customize：

自定义

转到 Templates：

打开模板

课程由不同的模板组成。我们希望在课程页面显示评论，因此请选择 Default Lesson Page（例如）：

选择模板

就是这样！现在您已准备好进行第二步。

第二步：添加代码

现在我们在模板编辑器中，必须决定要在何处显示评论或实时聊天。

在这个示例中，我们将其直接添加到视频下方。将鼠标悬停在元素上以将小部件添加到其末尾，然后点击 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 实时评论代码片段，请尝试以下内容：

ClickFunnels 实时评论代码片段

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 支持一种称为自动播放的功能。该功能允许您导入评论的 CSV 并将它们安排在播放在基于页面加载时间的小时、分钟和秒的特定偏移时刻播放。

它还会自动将任何发布的评论按正确的时间添加回自动播放脚本，因此您的视频脚本会随着每次网络研讨会增长，而无需任何手动操作。

此功能目前包含在所有 FastComments 计划中。

在此了解有关定时评论的更多信息

注意！

请记住，CSV 文件中的 URL ID 列必须与课程/视频的 URL 相匹配。

语言 🇨🇳 简体中文

ClickFunnels 安装

实时评论代码片段

自动播放评论