Add Comments to GoHighLevel Sites

使用 FastComments，我们可以轻松地为任何使用 GoHighLevel 构建的网站添加实时评论功能。

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

先登录将确保生成的代码片段已与您的帐户关联。

GoHighLevel 会员网站与其他网站

本教程分为两类：会员网站和常规的 GoHighLevel 网站。

我们先从会员网站的说明开始。

步骤 1：编辑课程

首先，我们将编辑课程的设置。

为此，打开课程，然后点击 Edit Details。

编辑课程详情

步骤 2：打开高级设置

接下来，我们需要打开 Advanced 设置：

打开高级设置

我们将把代码添加到 Tracking Code 部分。转到该部分并点击 Footer Code。

步骤 3：复制代码

现在我们将为你生成自定义的 FastComments 代码。使用下面的向导来配置 FastComments 在你的 GoHighLevel 网站上的工作方式：

FastComments Configuration Wizard

Comment Type: Choose the type of commenting experience you want

Placement Mode: How should the widget be placed on your pages?

Show on pages containing: Comma-separated URL patterns (leave empty for all pages)

Tenant ID: Your FastComments tenant ID (use "demo" for testing)

不同的评论框类型

你可以配置 TYPE = 'commenting' 这一行来切换使用的产品（例如你可以将其更改为 live 用于流式聊天，或 collab 用于协作聊天）。

将评论框放置在你想要的位置

假设你想在页面的特定部分放置评论框，而不是默认位置。更改这行：

const TARGET_ELEMENT_ID = ''; // 设置为使用目标 div 模式

为：

const TARGET_ELEMENT_ID = 'fc_box'; // 设置为使用目标 div 模式

然后在 GHL 编辑器中，点击“code”按钮并添加你想放置评论的位置：

GoHighLevel FastComments Div 元素

Copy

<div
  id="fc_box"
  type="commenting"
  urlid="custom-chat-id"
></div>

每页不同的评论框类型

假设你希望用户高亮并讨论文本片段，或者改用流式聊天界面。

首先按照上面“将评论框放置在你想要的位置”中的步骤操作。

注意在上面的那段小片段中有 type="commenting"。

例如，如果你想启用协作聊天，请将 type 改为 type="collab"。

仅在特定页面显示

如果你不设置不要设置 TARGET_ELEMENT_ID，你可以改为配置 VALID_PATTERNS 变量，以设置评论应该显示哪些 URL 路由。默认情况下，它会在 URL 中包含 /post 的页面上显示。

配置协作聊天

你可以告诉协作聊天只在特定区域内的 HTML 周围添加协作功能，例如，假设你在上面添加了页脚代码，然后在帖子/页面内容中添加此 div 来启用协作聊天：

具有指定内容的协作聊天

Copy

<div
  id="fc_box"
  type="collab"
  urlid="custom-chat-id"
><p>This content will have collab chat!</p></div>

然后 <div> 内的段落元素将启用协作聊天，页面上的其他部分则不会。如果你在 <div> 中不放任何内容，那么它将对整个帖子正文启用协作聊天。

步骤 4：粘贴代码

现在已复制代码片段，请将其按下图所示粘贴到 Footer Code 部分：

粘贴代码

会员站点：安装成功

就这样！您现在应该已经在您的 GoHighLevel 课程中添加了实时评论。

成功

如果您遇到“权限被拒绝”错误，或想自定义 FastComments，请继续阅读。

会员站点域名错误

您可能会遇到如下授权错误：

域名配置缺失

这是因为 FastComments 不知道应该允许您的帐户在此域上使用。

在这种情况下，修复很简单。您只需将您的站点添加到您的 FastComments.com 帐户中。

在此将您的站点添加到您的帐户。

现在，您的网站应该已经添加了快速、实时的评论功能！

会员站点自定义

FastComments 旨在可根据您的站点进行定制。

如果您想添加自定义样式，或调整配置，查看我们的自定义和配置文档以了解如何操作。

步骤 1：添加自定义代码元素

首先，我们将打开网站上要添加评论的页面的编辑器。

打开编辑器

现在找到页面上想要添加评论的位置。将鼠标移到该区域的末端。会出现一个 + 图标：

添加部分

如果我们点击它，会询问新部分应有多少列。我们将选择 1 COLUMN：

添加一列

现在，如果将鼠标移到新的单列行上，你将看到添加元素的选项。点击它：

添加元素

向下滚动并选择 CUSTOM JS/HTML：

选择 CUSTOM JS/HTML

现在选择我们的新元素，然后在左侧点击 Open Code Editor：

打开代码编辑器

步骤 2：复制并粘贴代码

现在是复制我们的代码。复制以下代码：

GoHighLevel 站点评论代码

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        const tenantId = 'demo';
        const SCRIPT_ID = 'fastcomments-embed';
        const WIDGET_ID = 'fastcomments-widget';
    
        let lastInstance;
        let currentUrlId;
        let rendered = false;
    
        // 为 SPA 支持修改 History API
        const oldPushState = history.pushState;
        history.pushState = function pushState() {
            const ret = oldPushState.apply(this, arguments);
            window.dispatchEvent(new Event('pushstate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };
    
        const oldReplaceState = history.replaceState;
        history.replaceState = function replaceState() {
            const ret = oldReplaceState.apply(this, arguments);
            window.dispatchEvent(new Event('replacestate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };
    
        window.addEventListener('popstate', () => {
            window.dispatchEvent(new Event('locationchange'));
        });
    
        function getContainer() {
            return document.getElementById(WIDGET_ID);
        }
    
        // 确保脚本已加载的函数
        function ensureScriptLoaded() {
            return new Promise((resolve) => {
                // 检查脚本标签是否已存在
                let scriptTag = document.getElementById(SCRIPT_ID);
    
                if (!scriptTag) {
                    console.log('FastComments: Script tag not found, adding dynamically...');
                    scriptTag = document.createElement('script');
                    scriptTag.id = SCRIPT_ID;
                    scriptTag.src = 'https://cdn.fastcomments.com/js/embed-v2.min.js';
                    scriptTag.async = true;
    
                    scriptTag.onload = () => {
                        console.log('FastComments: Script loaded successfully');
                        resolve();
                    };
    
                    scriptTag.onerror = () => {
                        console.error('FastComments: Failed to load script');
                        resolve(); // Resolve anyway to prevent hanging
                    };
    
                    document.head.appendChild(scriptTag);
                } else if (window.FastCommentsUI) {
                    // 脚本标签存在且已加载
                    console.log('FastComments: Script already loaded');
                    resolve();
                } else {
                    // 脚本标签存在但尚未就绪
                    console.log('FastComments: Waiting for script to initialize...');
                    scriptTag.addEventListener('load', () => {
                        resolve();
                    });
    
                    // 在脚本可能正在加载时的后备检查
                    const checkInterval = setInterval(() => {
                        if (window.FastCommentsUI) {
                            clearInterval(checkInterval);
                            resolve();
                        }
                    }, 100);
    
                    // 10 秒后超时
                    setTimeout(() => {
                        clearInterval(checkInterval);
                        console.warn('FastComments: Script load timeout');
                        resolve();
                    }, 10000);
                }
            });
        }
    
        // 主渲染函数
        async function render() {
            rendered = false;
    
            // 在继续之前确保脚本已加载
            await ensureScriptLoaded();
    
            function tryNext() {
                if (rendered) {
                    return;
                }
    
                const container = getContainer();
    
                if (container) {
                    // 再次检查 FastCommentsUI 是否可用
                    if (!window.FastCommentsUI) {
                        console.log('FastComments: not ready, waiting...');
                        setTimeout(tryNext, 300);
                        return;
                    }
    
                    console.log('FastComments: Target element found, initializing...');
    
                    // 将当前 URL 作为 urlId
                    const newUrlId = window.location.pathname;
    
                    // 检查是否需要重新渲染（urlId 改变或首次渲染）
                    if (currentUrlId !== newUrlId || !lastInstance) {
                        currentUrlId = newUrlId;
    
                        // 销毁之前的实例（如果存在）
                        if (lastInstance) {
                            lastInstance.destroy();
                            // 清空容器内容
                            container.innerHTML = '';
                        }
    
                        // 准备配置
                        const config = {
                            tenantId: tenantId,
                            urlId: newUrlId
                        };
    
                        console.log('FastComments: Using urlId:', newUrlId);
    
                        // 初始化 FastComments
                        lastInstance = window.FastCommentsUI(container, config);
                        rendered = true;
                    } else {
                        console.log('FastComments: Already rendered with same urlId');
                        rendered = true;
                    }
    
                    // 监测容器是否被移除或 URL 是否更改
                    const interval = setInterval(function () {
                        const currentContainer = getContainer();
                        if (!currentContainer) {
                            console.log('FastComments: Container removed, will retry...');
                            rendered = false;
                            currentUrlId = null;
                            tryNext();
                            clearInterval(interval);
                        } else {
                            const newUrlId = window.location.pathname;
                            if (newUrlId !== currentUrlId) {
                                console.log('FastComments: URL changed, re-rendering...');
                                rendered = false;
                                tryNext();
                                clearInterval(interval);
                            }
                        }
                    }, 1000);
                } else {
                    console.log('FastComments: Target element not found, waiting...');
                    setTimeout(tryNext, 300);
                }
            }
    
            tryNext();
        }
    
        // DOM 就绪时的首次渲染
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', render);
        } else {
            render();
        }
    
        // 在位置变更时重新渲染（用于 SPA）
        window.addEventListener('locationchange', function () {
            console.log('FastComments: Location changed, updating...');
            render();
        });
    })();
</script>

将其粘贴到我们打开的编辑器窗口中：

粘贴代码

现在我们可以点击该窗口右下角的 Yes, Save。

在页面顶部点击 Save，然后点击 Preview。

站点：安装成功

就是这样！您现在应该已经在您的 GoHighLevel 网站上添加了实时评论功能。

成功

如果您遇到“权限被拒绝”错误，或想要自定义 FastComments，请继续阅读。

站点域名错误

您可能会遇到如下授权错误：

缺少域配置

这是因为 FastComments 不知道应该允许您的账户在此域上使用。

在这种情况下，解决方法很简单。您只需将您的站点添加到您的 FastComments.com 帐户。

点击此处将您的站点添加到您的帐户。

现在，您的站点应该已经添加了快速、实时的评论功能！

站点自定义

FastComments 设计为可自定义，以匹配您的网站。

如果您想添加自定义样式或调整配置，请查看我们的自定义与配置文档以了解如何操作。

结论

如果所提供的步骤或代码因任何原因无法正常工作，请让我们知道。

GoHighLevel 会员站点安装

GoHighLevel 站点安装

Add Comments to GoHighLevel Sites

GoHighLevel 会员网站与其他网站

步骤 1：编辑课程

步骤 2：打开高级设置

步骤 3：复制代码

FastComments Configuration Wizard

Your Generated Code:

Additional Step Required:

不同的评论框类型

将评论框放置在你想要的位置

每页不同的评论框类型

仅在特定页面显示

配置协作聊天

步骤 4：粘贴代码

会员站点：安装成功

会员站点域名错误

现在，您的网站应该已经添加了快速、实时的评论功能！

会员站点自定义

步骤 1：添加自定义代码元素

步骤 2：复制并粘贴代码

站点：安装成功

站点域名错误

站点自定义

结论

语言 🇨🇳 简体中文

GoHighLevel 会员站点安装

GoHighLevel 站点安装

Add Comments to GoHighLevel Sites

GoHighLevel 会员网站与其他网站

步骤 1：编辑课程

步骤 2：打开高级设置

步骤 3：复制代码

FastComments Configuration Wizard

Your Generated Code:

Additional Step Required:

不同的评论框类型

将评论框放置在你想要的位置

每页不同的评论框类型

仅在特定页面显示

配置协作聊天

步骤 4：粘贴代码

会员站点：安装成功

会员站点域名错误

现在，您的网站应该已经添加了快速、实时的评论功能！

会员站点自定义

步骤 1：添加自定义代码元素

步骤 2：复制并粘贴代码

站点：安装成功

站点域名错误

站点自定义

结论