Add Comments to GoHighLevel Sites

Tout d'abord, nous allons modifier les paramètres de notre cours.

Pour ce faire, ouvrez le cours, et cliquez sur Edit Details.

Modifier les détails du cours

Ensuite, nous devons ouvrir les paramètres Advanced :

Ouvrir les paramètres Advanced

Nous ajouterons notre code à la section Tracking Code. Allez à cette section et cliquez sur Footer Code.

Nous allons maintenant générer votre code FastComments personnalisé. Utilisez l'assistant ci‑dessous pour configurer la façon dont vous voulez que FastComments fonctionne sur votre site GoHighLevel :

Différents types de boîtes de commentaires

Vous pouvez configurer la ligne TYPE = 'commenting' pour changer le produit utilisé (par exemple, vous pouvez la modifier en live pour le chat en streaming ou collab pour le chat collaboratif).

Placer la boîte de commentaires où vous le souhaitez

Supposons que vous souhaitiez placer des boîtes de commentaires sur des parties spécifiques de la page et non aux emplacements par défaut. Changez cette ligne :

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

Par :

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

Ensuite, dans l'éditeur GHL, cliquez sur le bouton "code" et ajoutez l'endroit où vous voulez que les commentaires apparaissent :

Div FastComments pour GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Type de boîte de commentaires différent par page

Supposons que vous souhaitiez que les utilisateurs puissent surligner et discuter des passages de texte, ou utiliser plutôt l'interface de chat en streaming.

Commencez par suivre les étapes ci‑dessus dans "Placer la boîte de commentaires où vous le souhaitez".

Remarquez que dans ce petit extrait il y a type="commenting".

Par exemple, si vous voulez activer le chat collab, changez le type en type="collab".

Afficher seulement sur des pages spécifiques

Si vous ne définissez pas TARGET_ELEMENT_ID, vous pouvez plutôt configurer la variable VALID_PATTERNS pour définir sur quelles routes d'URL les commentaires doivent s'afficher. Par défaut, ils s'affichent sur les pages contenant /post dans l'URL.

Configurer le chat collab

Vous pouvez indiquer au chat collab de n'ajouter des fonctionnalités collaboratives qu'autour du HTML à l'intérieur d'une zone spécifique. Par exemple, supposons que vous ajoutiez le code du pied de page ci‑dessus, puis ajoutiez cette div dans le contenu de l'article/page pour activer le chat collab :

Chat collab avec contenu spécifié

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

Ensuite, l'élément de paragraphe à l'intérieur du <div> aura le chat collab activé, et rien d'autre sur la page. Si vous ne mettez aucun contenu dans le <div>, il activera le chat collab sur tout le corps de l'article.

Maintenant que vous avez copié votre extrait, collez-le dans la section Footer Code comme indiqué :

Coller le code

C'est tout ! Vous devriez maintenant avoir les commentaires en direct ajoutés à votre cours GoHighLevel.

Succès

Si vous avez rencontré une erreur 'permission denied', ou si vous souhaitez personnaliser FastComments, lisez la suite.

FastComments est conçu pour être personnalisé afin de s'adapter à votre site.

Si vous souhaitez ajouter un style personnalisé, ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.

D'abord, nous allons ouvrir l'éditeur de la page de notre site sur laquelle nous voulons ajouter des commentaires.

Ouvrir l'éditeur

Maintenant, trouvez l'endroit sur la page où vous voulez ajouter des commentaires. Déplacez votre souris vers la fin de cette zone. Une icône + apparaîtra :

Ajouter une section

En cliquant, on vous demande combien de colonnes la nouvelle section doit comporter. Nous sélectionnerons 1 COLUMN :

Ajouter une colonne

Maintenant, si vous déplacez votre souris sur la nouvelle ligne d'une colonne, vous aurez l'option d'ajouter un élément. Cliquez dessus :

Ajouter un élément

Faites défiler vers le bas et choisissez CUSTOM JS/HTML :

Sélectionner CUSTOM JS/HTML

Maintenant, sélectionnez notre nouvel élément et cliquez sur Open Code Editor à gauche :

Ouvrir l'éditeur de code

Il est temps de copier notre code. Copiez le code suivant :

Code des commentaires du site 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 // Modifications de l'API History pour le support des 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 // Fonction pour s'assurer que le script est chargé

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Vérifier si la balise script existe déjà

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 // La balise script existe et est déjà chargée

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

66 resolve();

67 } else {

68 // La balise script existe mais n'est pas encore prête

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

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

71 resolve();

72 });

73

74 // Solution de repli au cas où le script est en cours de chargement

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Délai d'attente après 10 secondes

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Fonction principale de rendu

93 async function render() {

94 rendered = false;

95

96 // S'assurer que le script est chargé avant de continuer

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Vérifier à nouveau si FastCommentsUI est disponible

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 // Obtenir l'URL courante en tant que urlId

117 const newUrlId = window.location.pathname;

118

119 // Vérifier si nous devons re-rendre (urlId changé ou premier rendu)

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

121 currentUrlId = newUrlId;

122

123 // Détruire l'instance précédente si elle existe

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Vider le contenu du conteneur

127 container.innerHTML = '';

128 }

129

130 // Préparer la configuration

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Initialiser 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 // Surveiller si le conteneur est supprimé ou si l'URL change

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 // Rendu initial lorsque le DOM est prêt

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

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

177 } else {

178 render();

179 }

180

181 // Re-rendu lors du changement de localisation (pour les SPA)

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

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

184 render();

185 });

186 })();

187</script>

188

Collez cela dans la fenêtre de l'éditeur que nous avons ouverte :

Coller le code

Nous pouvons maintenant cliquer sur Yes, Save en bas à droite de cette fenêtre.

En haut de la page, cliquez maintenant sur Save puis sur Preview.

C'est tout ! Vous devriez maintenant avoir les commentaires en direct ajoutés à votre site GoHighLevel.

Succès

Si vous avez rencontré une erreur d'autorisation, ou si vous souhaitez personnaliser FastComments, lisez la suite.

FastComments est conçu pour être personnalisé afin de correspondre à votre site.

Si vous souhaitez ajouter un style personnalisé ou modifier la configuration, Consultez notre documentation de personnalisation pour savoir comment.