Reacties toevoegen aan 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 je aangepaste FastComments-code genereren. Gebruik de wizard hieronder om te configureren hoe je wilt dat FastComments werkt op je GoHighLevel-site:

Verschillende soorten commentaarvakken

Je kunt de regel TYPE = 'commenting' aanpassen om het gebruikte product te wijzigen (je kunt deze bijvoorbeeld veranderen in live voor streaming chat of collab voor collab chat).

Het commentaarvak plaatsen waar jij het wilt

Stel dat je commentaarvakken op specifieke delen van de pagina wilt plaatsen en niet op de standaardlocaties. Wijzig deze regel:

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

Naar:

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

Klik vervolgens in de GHL-editor op de knop "code" en voeg toe waar je de reacties wilt hebben:

GoHighLevel FastComments Div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Verschillend type commentaarvak per pagina

Stel dat je wilt dat gebruikers stukken tekst kunnen markeren en bespreken, of dat je de streaming chat-UI wilt gebruiken.

Volg eerst de stappen hierboven in "Het commentaarvak plaatsen waar jij het wilt".

Let op: in dat kleine snippet staat type="commenting".

Als je bijvoorbeeld collab chat wilt inschakelen, wijzig dan het type in type="collab".

Alleen weergeven op specifieke pagina's

Als je TARGET_ELEMENT_ID niet instelt, kun je in plaats daarvan de variabele VALID_PATTERNS configureren om in te stellen op welke URL-routes de reacties moeten worden weergegeven. Standaard worden ze weergegeven op pagina's die /post in de URL bevatten.

Collab chat configureren

Je kunt collab chat opdracht geven om alleen collaboratieve functionaliteit toe te voegen rond HTML binnen een specifiek gebied. Stel bijvoorbeeld dat je de footercode hierboven toevoegt en vervolgens deze div toevoegt in de inhoud van de post/pagina om collab chat in te schakelen:

Collab Chat Met Gespecificeerde Inhoud

Copy

1

2<div

3 id="fc_box"

4 type="collab"

5 urlid="custom-chat-id"

6><p>Deze inhoud krijgt collab chat!</p></div>

7

Dan heeft het alinea-element binnen de <div> collab chat ingeschakeld, en niets anders op de pagina. Als je geen inhoud in de <div> plaatst, wordt collab chat ingeschakeld op de gehele posttekst.

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.