Add Live Chat to ClickFunnels Courses

在本教學中，我們將說明如何將 FastComments 的串流聊天室與 ClickFunnels 課程整合。我們也會加入一個在結尾的程式碼片段，用於即時評論，如果你想改用那個的話。

請注意，本教學是針對課程模組，但將評論新增到部落格文章和頁面的步驟類似（只需編輯對應的範本）。

我們也會簡要說明如何設定自動化評論，以鼓勵使用者互動。

請注意，此教學需要 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() {
            // 某些提供者會把程式碼片段改成非同步
            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 支援一項稱為自動播放（Auto Play）的功能。這允許您匯入一個評論的 CSV 並排定它們在頁面載入時間起算的某些偏移時間播放在以小時、分鐘和秒為基準的時間點。

它也會自動把任何發表的評論重新加入自動播放腳本，並在正確的時間播放，這樣您的影片腳本會隨著每場研討會自動成長，無需任何手動操作。

此功能目前包含在所有 FastComments 方案中。

在此了解更多關於排程評論的資訊

注意！

請記得 CSV 檔案中的 URL ID 欄位必須符合課程/影片的 URL。

語言 🇹🇼 繁體中文

ClickFunnels 安裝

即時留言程式碼片段

自動播放留言