Add Comments to GoHighLevel Sites

Innanzitutto, modificheremo le impostazioni del nostro corso.

Per farlo, apri il corso e clicca Edit Details.

Modifica i dettagli del corso

Successivamente, dobbiamo aprire le impostazioni Advanced:

Apri Impostazioni Avanzate

Aggiungeremo il nostro codice nella sezione Tracking Code. Vai in quella sezione e fai clic su Footer Code.

Ora genereremo il tuo codice FastComments personalizzato. Usa la procedura guidata qui sotto per configurare come vuoi che FastComments funzioni sul tuo sito GoHighLevel:

Diversi tipi di box per i commenti

Puoi configurare la riga TYPE = 'commenting' per cambiare il prodotto utilizzato (per esempio puoi cambiarla in live per la chat in streaming o collab per la chat collab).

Posizionare il box dei commenti dove vuoi

Supponiamo che tu voglia mettere i box dei commenti in parti specifiche della pagina e non nelle posizioni predefinite. Cambia questa riga:

const TARGET_ELEMENT_ID = ''; // impostalo per usare la modalità div target

In:

const TARGET_ELEMENT_ID = 'fc_box'; // impostalo per usare la modalità div target

Poi nell'editor GHL, clicca il pulsante "code" e aggiungi il punto in cui vuoi che vadano i commenti:

Div FastComments di GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Tipo diverso di box per commenti per pagina

Supponiamo che tu voglia permettere agli utenti di evidenziare e discutere parti di testo, o usare l'interfaccia chat in streaming invece.

Prima segui i passaggi sopra in "Posizionare il box dei commenti dove vuoi".

Nota che in quel piccolo snippet c'è type="commenting".

Se vuoi abilitare la chat collab, ad esempio, cambia type in type="collab".

Mostra solo su pagine specifiche

Se non imposti TARGET_ELEMENT_ID, puoi invece configurare la variabile VALID_PATTERNS, per impostare su quali percorsi URL i commenti dovrebbero apparire. Per impostazione predefinita, verrà mostrato sulle pagine che contengono /post nell'URL.

Configurazione della chat collab

Puoi dire alla chat collab di aggiungere funzionalità collaborative solo attorno all'HTML dentro una specifica area, per esempio, supponiamo che tu aggiunga il codice del footer sopra e poi aggiunga questo div nel contenuto del post/pagina per abilitare la chat collab:

Chat collab con contenuto specificato

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

Allora l'elemento paragrafo all'interno del <div> avrà la chat collab abilitata, e nient'altro nella pagina. Se non metti contenuto nel <div> allora abiliterà la chat collab sull'intero corpo del post.

Ora che abbiamo copiato il nostro snippet, incollalo nella sezione Footer Code come mostrato:

Incolla il codice

Questo è tutto! Dovresti ora avere i commenti in tempo reale aggiunti al tuo corso GoHighLevel.

Successo

Se hai riscontrato un errore di permesso negato, o desideri personalizzare FastComments, continua a leggere.

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere uno stile personalizzato o modificare la configurazione, Consulta la nostra Documentazione sulla personalizzazione per scoprire come.

Per prima cosa, apriremo l'editor della pagina del nostro sito alla quale vogliamo aggiungere commenti.

Apri l'Editor

Ora trova il punto nella pagina dove vuoi aggiungere i commenti. Muovi il mouse verso la fine di quell'area. Apparirà un'icona +:

Aggiungi Sezione

Se ci clicchiamo chiede quante colonne deve avere la nuova sezione. Selezioneremo 1 COLUMN:

Aggiungi una Colonna

Ora, se muovi il mouse sopra la nuova riga a 1 colonna avrai l'opzione per aggiungere un elemento. Cliccaci sopra:

Aggiungi Elemento

Scorri verso il basso e seleziona CUSTOM JS/HTML:

Seleziona CUSTOM JS/HTML

Ora seleziona il nostro nuovo elemento e clicca Open Code Editor a sinistra:

Apri l'Editor di Codice

È ora di copiare il nostro codice. Copia il codice seguente:

Codice commenti sito 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 // Modifiche all'API History per il supporto alle SPA

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 // Funzione per assicurarsi che lo script sia caricato

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Verifica se il tag script esiste già

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 // Il tag script esiste ed è già caricato

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

66 resolve();

67 } else {

68 // Il tag script esiste ma non è ancora pronto

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

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

71 resolve();

72 });

73

74 // Fallback nel caso in cui lo script sia già in fase di caricamento

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Timeout dopo 10 secondi

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Funzione principale di rendering

93 async function render() {

94 rendered = false;

95

96 // Assicurati che lo script sia caricato prima di procedere

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Verifica nuovamente se FastCommentsUI è disponibile

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 // Ottieni l'URL corrente come urlId

117 const newUrlId = window.location.pathname;

118

119 // Controlla se è necessario rieseguire il rendering (urlId cambiato o primo render)

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

121 currentUrlId = newUrlId;

122

123 // Distruggi l'istanza precedente se esiste

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Pulisci il contenuto del contenitore

127 container.innerHTML = '';

128 }

129

130 // Prepara la configurazione

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Inizializza 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 // Monitora se il contenitore viene rimosso o l'URL cambia

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 // Render iniziale quando il DOM è pronto

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

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

177 } else {

178 render();

179 }

180

181 // Riesegui il rendering al cambiamento di posizione (per SPA)

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

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

184 render();

185 });

186 })();

187</script>

188

Incolla questo nella finestra dell'editor che abbiamo aperto:

Incolla il codice

Ora possiamo cliccare Yes, Save in basso a destra di quella finestra.

In alto alla pagina clicca ora su Save e poi su Preview.

Ecco fatto! Ora dovresti avere i commenti live aggiunti al tuo sito GoHighLevel.

Successo

Se hai riscontrato un errore di 'permesso negato' o desideri personalizzare FastComments, continua a leggere.

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati, o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.