Add Comments to GoHighLevel Sites

まず、コースの設定を編集します。

これを行うには、コースを開き、Edit Detailsをクリックします。

コースの詳細を編集

次に、Advanced 設定を開きます:

Advanced 設定を開く

コードは Tracking Code セクションに追加します。該当セクションに移動し、Footer Code をクリックしてください。

これからカスタムの FastComments コードを生成します。以下のウィザードを使って、FastComments を GoHighLevel サイトでどのように動作させるかを設定してください:

異なるコメントボックスの種類

TYPE = 'commenting' の行を設定して使用するプロダクトを切り替えることができます（例えばストリーミングチャットには live に、コラボチャットには collab に変更できます）。

コメントボックスを任意の場所に配置する

ページの特定の部分にコメントボックスを配置し、デフォルトの場所ではなくしたいとします。 この行を変更してください:

const TARGET_ELEMENT_ID = ''; // set to use target div mode

に:

const TARGET_ELEMENT_ID = 'fc_box'; // set to use target div mode

それから GHL エディタで「code」ボタンをクリックし、コメントを表示したい場所に追加してください:

GoHighLevel FastComments の Div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

ページごとに異なるコメントボックスタイプ

ユーザーにテキストの一部をハイライトして議論させたり、代わりにストリーミングチャットの UI を使用させたいとします。

まずは上記の「コメントボックスを任意の場所に配置する」の手順に従ってください。

その小さなスニペット内には type="commenting" とあります。

例えば collab チャットを有効にしたい場合は type="collab" に変更してください。

特定のページにのみ表示する

TARGET_ELEMENT_ID を設定しない場合、代わりに VALID_PATTERNS 変数を設定して、コメントを表示する URL ルートを指定することができます。デフォルトでは、URL に /post が含まれるページに表示されます。

コラボチャットの設定

コラボチャットに、特定のエリア内の HTML 周辺だけに共同機能を追加するよう指示することができます。例えば、上記のフッターコードを追加し、その後投稿/ページのコンテンツ内に次の div を追加してコラボチャットを有効にするとします:

指定コンテンツでのコラボチャット

Copy

1

2<div

3 id="fc_box"

4 type="collab"

5 urlid="custom-chat-id"

6><p>This content will have collab chat!</p></div>

7

すると <div> 内の paragraph 要素にのみコラボチャットが有効になり、ページの他の部分には影響しません。<div> に何もコンテンツを入れない場合は、投稿本文全体でコラボチャットが有効になります。

スニペットをコピーしたら、以下のように Footer Code セクションに貼り付けてください:

Paste Code

以上です！これで GoHighLevel コースにライブコメントが追加されました。

成功

権限拒否エラーが発生した場合、または FastComments をカスタマイズしたい場合は、以下をお読みください。

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

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

まず、コメントを追加したいサイトのページのエディタを開きます。

エディタを開く

次に、ページ上でコメントを追加したい箇所を探します。そのエリアの端にマウスを移動させると、+ アイコンが表示されます：

セクションを追加

それをクリックすると、新しいセクションの列数を尋ねられます。ここでは 1 COLUMN を選択します：

列を追加

今、新しい1列の行上にマウスを移動すると、要素を追加するオプションが表示されます。それをクリックしてください：

要素を追加

下にスクロールして CUSTOM JS/HTML を選択します：

CUSTOM JS/HTML を選択

新しく追加した要素を選択し、左側の Open Code Editor をクリックします：

コードエディタを開く

コードをコピーする時間です。以下のコードをコピーしてください:

GoHighLevel サイトコメントコード

Copy

1

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

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const tenantId = 'demo';

7 const SCRIPT_ID = 'fastcomments-embed';

8 const WIDGET_ID = 'fastcomments-widget';

9

10 let lastInstance;

11 let currentUrlId;

12 let rendered = false;

13

14 // SPA サポートのための History API の変更

15 const oldPushState = history.pushState;

16 history.pushState = function pushState() {

17 const ret = oldPushState.apply(this, arguments);

18 window.dispatchEvent(new Event('pushstate'));

19 window.dispatchEvent(new Event('locationchange'));

20 return ret;

21 };

22

23 const oldReplaceState = history.replaceState;

24 history.replaceState = function replaceState() {

25 const ret = oldReplaceState.apply(this, arguments);

26 window.dispatchEvent(new Event('replacestate'));

27 window.dispatchEvent(new Event('locationchange'));

28 return ret;

29 };

30

31 window.addEventListener('popstate', () => {

32 window.dispatchEvent(new Event('locationchange'));

33 });

34

35 function getContainer() {

36 return document.getElementById(WIDGET_ID);

37 }

38

39 // スクリプトが読み込まれていることを保証する関数

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // スクリプトタグが既に存在するか確認

43 let scriptTag = document.getElementById(SCRIPT_ID);

44

45 if (!scriptTag) {

46 console.log('FastComments: Script tag not found, adding dynamically...');

47 scriptTag = document.createElement('script');

48 scriptTag.id = SCRIPT_ID;

49 scriptTag.src = 'https://cdn.fastcomments.com/js/embed-v2.min.js';

50 scriptTag.async = true;

51

52 scriptTag.onload = () => {

53 console.log('FastComments: Script loaded successfully');

54 resolve();

55 };

56

57 scriptTag.onerror = () => {

58 console.error('FastComments: Failed to load script');

59 resolve(); // ハングを防ぐためにいずれにせよ resolve() を呼ぶ

60 };

61

62 document.head.appendChild(scriptTag);

63 } else if (window.FastCommentsUI) {

64 // スクリプトタグは存在し、すでに読み込まれている

65 console.log('FastComments: Script already loaded');

66 resolve();

67 } else {

68 // スクリプトタグは存在するがまだ準備ができていない

69 console.log('FastComments: Waiting for script to initialize...');

70 scriptTag.addEventListener('load', () => {

71 resolve();

72 });

73

74 // スクリプトが既に読み込まれている場合のフォールバック

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // 10 秒後にタイムアウト

83 setTimeout(() => {

84 clearInterval(checkInterval);

85 console.warn('FastComments: Script load timeout');

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // メインのレンダリング関数

93 async function render() {

94 rendered = false;

95

96 // 続行する前にスクリプトが読み込まれていることを確認

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // FastCommentsUI が利用可能か再確認

108 if (!window.FastCommentsUI) {

109 console.log('FastComments: not ready, waiting...');

110 setTimeout(tryNext, 300);

111 return;

112 }

113

114 console.log('FastComments: Target element found, initializing...');

115

116 // 現在の URL を urlId として取得

117 const newUrlId = window.location.pathname;

118

119 // 再レンダリングが必要かチェック（urlId が変更されたか初回レンダリングか）

120 if (currentUrlId !== newUrlId || !lastInstance) {

121 currentUrlId = newUrlId;

122

123 // 既存のインスタンスがあれば破棄

124 if (lastInstance) {

125 lastInstance.destroy();

126 // コンテナの内容をクリア

127 container.innerHTML = '';

128 }

129

130 // 設定を準備

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

136 console.log('FastComments: Using urlId:', newUrlId);

137

138 // FastComments を初期化

139 lastInstance = window.FastCommentsUI(container, config);

140 rendered = true;

141 } else {

142 console.log('FastComments: Already rendered with same urlId');

143 rendered = true;

144 }

145

146 // コンテナが削除されたり URL が変わるか監視

147 const interval = setInterval(function () {

148 const currentContainer = getContainer();

149 if (!currentContainer) {

150 console.log('FastComments: Container removed, will retry...');

151 rendered = false;

152 currentUrlId = null;

153 tryNext();

154 clearInterval(interval);

155 } else {

156 const newUrlId = window.location.pathname;

157 if (newUrlId !== currentUrlId) {

158 console.log('FastComments: URL changed, re-rendering...');

159 rendered = false;

160 tryNext();

161 clearInterval(interval);

162 }

163 }

164 }, 1000);

165 } else {

166 console.log('FastComments: Target element not found, waiting...');

167 setTimeout(tryNext, 300);

168 }

169 }

170

171 tryNext();

172 }

173

174 // DOM の準備ができたら初回レンダリング

175 if (document.readyState === 'loading') {

176 document.addEventListener('DOMContentLoaded', render);

177 } else {

178 render();

179 }

180

181 // ロケーション変更時に再レンダリング（SPA 向け）

182 window.addEventListener('locationchange', function () {

183 console.log('FastComments: Location changed, updating...');

184 render();

185 });

186 })();

187</script>

188

先ほど開いたエディタウィンドウに貼り付けてください:

コードを貼り付け

これで、そのウィンドウの右下にある Yes, Save をクリックできます。

ページ上部で Save をクリックし、その後 Preview をクリックします。

これで完了です！GoHighLevel サイトにライブコメントが追加されているはずです。

成功

もし 'permission denied' エラーが発生した場合、または FastComments をカスタマイズしたい場合は、続きをお読みください。

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

カスタムスタイリングを追加したり、設定を調整したい場合は、カスタマイズのドキュメントをご覧ください で方法を確認してください。