ClickFunnels コースにライブチャットを追加する

最初に、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

1

2<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>

3<div id="fastcomments-live-chat-widget" style="width: 500px;min-height: 780px;"></div>

4<style>

5 #fastcomments-live-chat-widget iframe {

6 min-height: 780px;

7 }

8</style>

9<script>

10 (function fcLoad() {

11 function tryLoad() {

12 // 一部のプロバイダーはコードスニペットを非同期に変更します

13 const container = document.getElementById('fastcomments-live-chat-widget');

14 if (!container) {

15 return waitRetry();

16 }

17 if (!window.FastCommentsLiveChat) {

18 return waitRetry();

19 }

20 window.FastCommentsLiveChat(container, {

21 tenantId: 'demo'

22 });

23 }

24 function waitRetry() {

25 setTimeout(tryLoad, 500);

26 }

27 tryLoad();

28 })();

29</script>

30

このコードスニペットは、動画と相性の良い Streaming Chat 製品用のものです。通常のページやブログ記事に最も適した Live Commenting ウィジェットの コードスニペットが必要な場合は、このチュートリアルの最後にあります。

コードスニペットをウィンドウに貼り付けると、次のようになります:

コードを貼り付け

あとはボックスを閉じるだけです:

閉じる

これで変更をプレビューできます! ウィジェットを自由に移動して、最適な位置を確認してください。

プレビュー

成功です! モバイルでのテストもお忘れなく!

成功!

FastComments はあなたのサイトに合わせてカスタマイズできるように設計されています。

カスタムスタイリングを追加したり設定を調整したい場合は、カスタマイズと設定に関するドキュメント をご覧ください。

ClickFunnelsのライブコメント用コードスニペットを探している場合は、こちらをお試しください：

ClickFunnels ライブコメントスニペット

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="min-width: 500px;min-height: 780px;"></div>

4<style>

5 #fastcomments-widget iframe {

6 min-height: 780px;

7 }

8</style>

9<script>

10 (function fcLoad() {

11 function tryLoad() {

12 // 一部のプロバイダーはコードスニペットを非同期に変更することがあります

13 const container = document.getElementById('fastcomments-widget');

14 if (!container) {

15 return waitRetry();

16 }

17 if (!window.FastCommentsUI) {

18 return waitRetry();

19 }

20 window.FastCommentsUI(container, {

21 tenantId: 'demo'

22 });

23 }

24 function waitRetry() {

25 setTimeout(tryLoad, 500);

26 }

27 tryLoad();

28 })();

29</script>

30

FastComments は Auto Play（自動再生）という機能をサポートしています。これにより、コメントの CSV をインポートして、それらを再生するようにスケジュールできます ページ読み込み時からの時・分・秒に基づく特定のオフセットで。

また、投稿されたコメントを正しい時間に自動的にオートプレイスクリプトに追加するため、あなたのビデオ スクリプトは各ウェビナーごとに手動の作業なしで増えていきます。

これは現在、すべての FastComments プランに含まれています。

スケジュールされたコメントについて詳しくはこちら

注意!

CSV ファイル内の URL ID 列がコース/ビデオの URL と一致する必要があることを忘れないでください。