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 avancés

Nous allons ajouter notre code dans la section Tracking Code. Allez dans cette section et cliquez sur Footer Code.

Maintenant nous allons 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 :

Different Comment Box Types

You can configure the TYPE = 'commenting' line to switch the product used (for example you can change it to live for streaming chat or collab for collab chat).

Putting The Comment Box Where You Want

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. Modifiez cette ligne :

const TARGET_ELEMENT_ID = ''; // définir pour utiliser le mode div ciblé

Remplacez par :

const TARGET_ELEMENT_ID = 'fc_box'; // définir pour utiliser le mode div ciblé

Ensuite, dans l'éditeur GHL, cliquez 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

Different Comment Box Type Per-Page

Supposons que vous souhaitiez que les utilisateurs surlignent et discutent des passages de texte, ou utilisent plutôt l'interface de chat en streaming.

Suivez d'abord les étapes ci-dessus dans "Placer la boîte de commentaires où vous le souhaitez".

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

Si vous souhaitez activer le chat collaboratif, par exemple, changez le type en type="collab".

Only Show On Specific Pages

Si vous ne définissez pas TARGET_ELEMENT_ID, vous pouvez configurer à la place la variable VALID_PATTERNS pour définir sur quelles routes URL les commentaires doivent s'afficher. Par défaut, ils s'afficheront sur les pages dont l'URL contient /post.

Configuring Collab Chat

Vous pouvez indiquer au chat collaboratif d'ajouter la fonctionnalité collaborative uniquement autour du HTML à l'intérieur d'une zone spécifique. Par exemple, supposons que vous ajoutiez le code de pied de page ci-dessus, puis ajoutiez ce div dans le contenu de l'article/de la page pour activer le chat collaboratif :

Chat collaboratif 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 paragraphe à l'intérieur du <div> aura le chat collaboratif activé, et rien d'autre sur la page. Si vous ne mettez aucun contenu dans le <div> alors cela activera le chat collaboratif sur l'intégralité du corps de l'article.

Maintenant que nous avons copié notre extrait, collez-le dans la section Footer Code comme indiqué :

Coller le code

C'est tout ! Vous devriez maintenant avoir ajouté des commentaires en direct à 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 correspondre à votre site.

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

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

Ouvrir l'éditeur

Trouvez maintenant 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

Si nous cliquons, il nous demande combien de colonnes la nouvelle section doit contenir. Nous sélectionnerons 1 COLUMN :

Ajouter une colonne

Maintenant, si vous déplacez votre souris sur la nouvelle ligne à 1 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électionnez CUSTOM JS/HTML

Sélectionnez maintenant 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 de 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 la prise en charge 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(); // Résoudre quand même pour éviter un blocage

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 secours au cas où le script est déjà 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 de 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 une nouvelle fois 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 // Récupérer l'URL actuelle comme urlId

117 const newUrlId = window.location.pathname;

118

119 // Vérifier si nous devons relancer le rendu (urlId modifié 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 // Relancer le rendu lors d'un 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 désormais avoir les commentaires en temps réel ajoutés à votre site 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é pour s'adapter à votre site.

Si vous souhaitez ajouter des styles personnalisés ou modifier la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.