Add Comments to GoHighLevel Sites

Eerst gaan we de instellingen van onze cursus bewerken.

Om dit te doen, open de cursus en klik op Edit Details.

Cursusdetails bewerken

Vervolgens moeten we de Advanced-instellingen openen:

Open geavanceerde instellingen

We voegen onze code toe aan de sectie Tracking Code. Ga naar die sectie en klik op Footer Code.

Nu gaan we uw aangepaste FastComments-code genereren. Gebruik de wizard hieronder om te configureren hoe u FastComments wilt laten werken op uw GoHighLevel-site:

Verschillende typen commentboxen

U kunt de regel TYPE = 'commenting' configureren om het gebruikte product te wijzigen (bijvoorbeeld kunt u het veranderen naar live voor streaming chat of collab voor collab chat).

De commentbox waar u hem wilt plaatsen

Stel dat u commentboxen op specifieke delen van de pagina wilt plaatsen en niet op de standaardlocaties. Change this line:

const TARGET_ELEMENT_ID = ''; // instellen om target-divmodus te gebruiken

To:

const TARGET_ELEMENT_ID = 'fc_box'; // instellen om target-divmodus te gebruiken

Then in the GHL editor, click the "code" button and add where you want the comments to go:

GoHighLevel FastComments-div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Verschillend commentbox-type per pagina

Stel dat u wilt dat gebruikers stukken tekst markeren en bespreken, of in plaats daarvan de streaming chat UI gebruiken.

First follow the steps above in "De commentbox waar u hem wilt plaatsen".

Let op dat in dat kleine fragment type="commenting" staat.

Als u bijvoorbeeld collab chat wilt inschakelen, verander dan type naar type="collab".

Alleen tonen op specifieke pagina's

Als u TARGET_ELEMENT_ID niet instelt, kunt u in plaats daarvan de variabele VALID_PATTERNS configureren om in te stellen op welke URL-routes de opmerkingen moeten worden weergegeven. Standaard wordt het weergegeven op pagina's die /post in de URL bevatten.

Collab Chat configureren

U kunt collab chat zo instellen dat het alleen samenwerkingsfunctionaliteit toevoegt rond HTML binnen een specifiek gebied. Stel bijvoorbeeld dat u de footer-code hierboven toevoegt en vervolgens deze div in de inhoud van de post/pagina plaatst om collab chat in te schakelen:

Collab-chat met opgegeven inhoud

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

Dan zal het paragraafelement binnen de <div> collab chat ingeschakeld hebben, en niets anders op de pagina. Als u geen inhoud in de <div> plaatst, wordt collab chat ingeschakeld voor de gehele inhoud van de post.

Nu we ons codefragment hebben gekopieerd, plak het in de Footer Code sectie zoals hieronder:

Plak code

Dat is alles! Je zou nu live reacties aan je GoHighLevel-cursus toegevoegd moeten hebben.

Succes

Als je een 'permission denied' fout bent tegengekomen, of FastComments wilt aanpassen, lees verder.

FastComments is ontworpen om aangepast te worden zodat het bij jouw site past.

Als je aangepaste styling wilt toevoegen of de configuratie wilt wijzigen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.

Eerst openen we de editor voor de pagina van onze site waaraan we reacties willen toevoegen.

Editor openen

Zoek nu de plaats op de pagina waar je reacties wilt toevoegen. Beweeg je muis naar het einde van dat gedeelte. Er verschijnt een +-pictogram:

Sectie toevoegen

Als we daarop klikken vraagt het hoeveel kolommen de nieuwe sectie moet hebben. We kiezen 1 COLUMN:

Kolom toevoegen

Als je nu je muis over de nieuwe rij met 1 kolom beweegt, krijg je de optie om een element toe te voegen. Klik daarop:

Element toevoegen

Scroll naar beneden en kies CUSTOM JS/HTML:

Selecteer CUSTOM JS/HTML

Selecteer nu ons nieuwe element en klik links op Open Code Editor:

Code-editor openen

Het is tijd om onze code te kopiëren. Kopieer de volgende code:

GoHighLevel site reactiescode

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 // Wijzigingen aan de History API voor SPA-ondersteuning

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 // Functie om ervoor te zorgen dat het script geladen is

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Controleren of het script-tag al aanwezig is

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 // Los toch op om vastlopen te voorkomen

60 resolve(); // Resolve anyway to prevent hanging

61 };

62

63 document.head.appendChild(scriptTag);

64 } else if (window.FastCommentsUI) {

65 // Script-tag bestaat en is al geladen

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

67 resolve();

68 } else {

69 // Script-tag bestaat maar is nog niet klaar

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

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

72 resolve();

73 });

74

75 // Fallback voor het geval het script al aan het laden is

76 const checkInterval = setInterval(() => {

77 if (window.FastCommentsUI) {

78 clearInterval(checkInterval);

79 resolve();

80 }

81 }, 100);

82

83 // Time-out na 10 seconden

84 setTimeout(() => {

85 clearInterval(checkInterval);

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

87 resolve();

88 }, 10000);

89 }

90 });

91 }

92

93 // Hoofdfunctie voor renderen

94 async function render() {

95 rendered = false;

96

97 // Zorg ervoor dat het script geladen is voordat verder wordt gegaan

98 await ensureScriptLoaded();

99

100 function tryNext() {

101 if (rendered) {

102 return;

103 }

104

105 const container = getContainer();

106

107 if (container) {

108 // Dubbel controleren of FastCommentsUI beschikbaar is

109 if (!window.FastCommentsUI) {

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

111 setTimeout(tryNext, 300);

112 return;

113 }

114

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

116

117 // Haal de huidige URL op als urlId

118 const newUrlId = window.location.pathname;

119

120 // Controleren of we opnieuw moeten renderen (urlId gewijzigd of eerste render)

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

122 currentUrlId = newUrlId;

123

124 // Vorige instantie vernietigen indien aanwezig

125 if (lastInstance) {

126 lastInstance.destroy();

127 // Inhoud van de container wissen

128 container.innerHTML = '';

129 }

130

131 // Configuratie voorbereiden

132 const config = {

133 tenantId: tenantId,

134 urlId: newUrlId

135 };

136

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

138

139 // Initialiseer FastComments

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

141 rendered = true;

142 } else {

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

144 rendered = true;

145 }

146

147 // Controleren of de container wordt verwijderd of de URL verandert

148 const interval = setInterval(function () {

149 const currentContainer = getContainer();

150 if (!currentContainer) {

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

152 rendered = false;

153 currentUrlId = null;

154 tryNext();

155 clearInterval(interval);

156 } else {

157 const newUrlId = window.location.pathname;

158 if (newUrlId !== currentUrlId) {

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

160 rendered = false;

161 tryNext();

162 clearInterval(interval);

163 }

164 }

165 }, 1000);

166 } else {

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

168 setTimeout(tryNext, 300);

169 }

170 }

171

172 tryNext();

173 }

174

175 // Initieel renderen wanneer de DOM klaar is

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

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

178 } else {

179 render();

180 }

181

182 // Opnieuw renderen bij locatieverandering (voor SPA's)

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

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

185 render();

186 });

187 })();

188</script>

189

Plak dat in het editorvenster dat we hebben geopend:

Plak code

We kunnen nu op Yes, Save klikken rechtsonder in dat venster.

Klik nu bovenaan de pagina op Save en daarna op Preview.

Dat is alles! Je zou nu live reacties op je GoHighLevel-site moeten hebben.

Succes

Als je een 'permission denied'-fout bent tegengekomen of FastComments wilt aanpassen, lees verder.

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.