Add Comments to GoHighLevel Sites

Zuerst werden wir die Einstellungen für unseren Kurs bearbeiten.

Um dies zu tun, öffnen Sie den Kurs und klicken Sie auf Edit Details.

Kursdetails bearbeiten

Als Nächstes müssen wir die Advanced-Einstellungen öffnen:

Erweiterte Einstellungen öffnen

Wir werden unseren Code im Abschnitt Tracking Code einfügen. Gehen Sie zu diesem Abschnitt und klicken Sie auf Footer Code.

Jetzt werden wir deinen benutzerdefinierten FastComments-Code erzeugen. Verwende den untenstehenden Assistenten, um zu konfigurieren, wie FastComments auf deiner GoHighLevel-Seite funktionieren soll:

Verschiedene Kommentarbox-Typen

Du kannst die Zeile TYPE = 'commenting' konfigurieren, um das verwendete Produkt zu wechseln (zum Beispiel kannst du sie zu live für Streaming-Chat oder collab für Collab-Chat ändern).

Die Kommentarbox an der gewünschten Stelle platzieren

Angenommen, du möchtest Kommentarboxen an bestimmten Stellen der Seite platzieren und nicht an den Standardpositionen. Ändere diese Zeile:

const TARGET_ELEMENT_ID = ''; // um den Ziel-div-Modus zu verwenden

Zu:

const TARGET_ELEMENT_ID = 'fc_box'; // um den Ziel-div-Modus zu verwenden

Klicke dann im GHL-Editor auf den "code"-Button und füge dort ein, wo die Kommentare erscheinen sollen:

GoHighLevel FastComments-Div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Unterschiedlicher Kommentarbox-Typ pro Seite

Angenommen, du möchtest, dass Benutzer Textstellen hervorheben und diskutieren oder stattdessen die Streaming-Chat-Oberfläche verwenden.

Folge zuerst den oben beschriebenen Schritten in "Die Kommentarbox an der gewünschten Stelle platzieren".

Beachte, dass in diesem kleinen Snippet type="commenting" steht.

Wenn du zum Beispiel Collab-Chat aktivieren möchtest, ändere type zu type="collab".

Nur auf bestimmten Seiten anzeigen

Wenn du TARGET_ELEMENT_ID nicht setzt, kannst du stattdessen die Variable VALID_PATTERNS konfigurieren, um festzulegen, bei welchen URL-Routen die Kommentare angezeigt werden sollen. Standardmäßig werden sie auf Seiten angezeigt, die /post in der URL enthalten.

Collab-Chat konfigurieren

Du kannst dem Collab-Chat anweisen, kollaborative Funktionen nur um HTML innerhalb eines bestimmten Bereichs hinzuzufügen, zum Beispiel, sagen wir, du fügst den Footer-Code oben ein und fügst dann dieses Div in den Beitrag-/Seiteninhalt ein, um Collab-Chat zu aktivieren:

Collab-Chat mit angegebenem Inhalt

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

Dann erhält das Absatz-Element innerhalb des <div> Collab-Chat, und sonst nichts auf der Seite. Wenn du keinen Inhalt in das <div> einfügst, wird Collab-Chat für den gesamten Beitragstext aktiviert.

Nachdem wir unseren Codeausschnitt kopiert haben, fügen Sie ihn in den Abschnitt Footer Code wie gezeigt ein:

Code einfügen

Das war's! Sie sollten jetzt Live-Kommentare zu Ihrem GoHighLevel-Kurs hinzugefügt haben.

Erfolg

Wenn Sie auf einen 'permission denied'-Fehler gestoßen sind oder FastComments anpassen möchten, lesen Sie weiter.

FastComments ist so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Stile hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Anpassungsdokumentation Anpassungsdokumentation an, um zu erfahren, wie.

Zuerst öffnen wir den Editor für die Seite unserer Website, zu der wir Kommentare hinzufügen möchten.

Editor öffnen

Suchen Sie nun die Stelle auf der Seite, an der Sie Kommentare hinzufügen möchten. Bewegen Sie Ihre Maus zum Ende dieses Bereichs. Ein +-Symbol wird angezeigt:

Abschnitt hinzufügen

Wenn wir darauf klicken, werden wir gefragt, wie viele Spalten der neue Abschnitt haben soll. Wir wählen 1 COLUMN:

Spalte hinzufügen

Wenn Sie nun die Maus über die neue 1-Spalten-Zeile bewegen, haben Sie die Möglichkeit, ein Element hinzuzufügen. Klicken Sie darauf:

Element hinzufügen

Scrollen Sie nach unten und wählen Sie CUSTOM JS/HTML:

Select CUSTOM JS/HTML

Wählen Sie nun unser neues Element aus und klicken Sie links auf Open Code Editor:

Code-Editor öffnen

Es ist Zeit, unseren Code zu kopieren. Kopieren Sie den folgenden Code:

GoHighLevel Site-Kommentare Code

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 // Änderungen an der History-API zur Unterstützung von SPAs

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 // Funktion, um sicherzustellen, dass das Skript geladen ist

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Prüfen, ob das Skript-Tag bereits existiert

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 anyway to prevent hanging

60 };

61

62 document.head.appendChild(scriptTag);

63 } else if (window.FastCommentsUI) {

64 // Skript-Tag existiert und ist bereits geladen

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

66 resolve();

67 } else {

68 // Skript-Tag existiert, ist aber noch nicht bereit

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

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

71 resolve();

72 });

73

74 // Fallback für den Fall, dass das Skript bereits geladen wird

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Timeout nach 10 Sekunden

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Haupt-Render-Funktion

93 async function render() {

94 rendered = false;

95

96 // Sicherstellen, dass das Skript geladen ist, bevor fortgefahren wird

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Doppelt prüfen, ob FastCommentsUI verfügbar ist

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 // Aktuelle URL als urlId holen

117 const newUrlId = window.location.pathname;

118

119 // Prüfen, ob wir neu rendern müssen (urlId geändert oder erstes Rendern)

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

121 currentUrlId = newUrlId;

122

123 // Vorherige Instanz zerstören, falls vorhanden

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Inhalt des Containers leeren

127 container.innerHTML = '';

128 }

129

130 // Konfiguration vorbereiten

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // FastComments initialisieren

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 // Überwachen, ob der Container entfernt wird oder die URL sich ändert

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 // Erstes Rendern, wenn DOM bereit ist

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

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

177 } else {

178 render();

179 }

180

181 // Neu rendern bei Standortänderung (für SPAs)

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

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

184 render();

185 });

186 })();

187</script>

188

Fügen Sie das in das von uns geöffnete Editorfenster ein:

Code einfügen

Wir können jetzt auf Yes, Save unten rechts in diesem Fenster klicken.

Oben auf der Seite klicken Sie nun auf Save und dann auf Preview.

Das war's! Sie sollten jetzt Live-Kommentare auf Ihrer GoHighLevel-Website hinzugefügt haben.

Erfolg

Wenn Sie auf einen 'permission denied'-Fehler gestoßen sind, oder FastComments anpassen möchten, lesen Sie weiter.

FastComments wurde so entwickelt, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Stile hinzufügen oder die Konfiguration anpassen möchten, Sehen Sie sich unsere Anpassungsdokumentation an, um zu erfahren, wie.