Add Comments to GoHighLevel Sites

Først vil vi redigere indstillingerne for vores kursus.

For at gøre dette skal du åbne kurset og klikke på Edit Details.

Rediger kursusoplysninger

Dernæst skal vi åbne Advanced-indstillingerne:

Åbn avancerede indstillinger

Vi vil tilføje vores kode i Tracking Code-sektionen. Gå til den sektion og klik på Footer Code.

Nu vil vi generere din tilpassede FastComments-kode. Brug guiden nedenfor til at konfigurere, hvordan du vil have FastComments til at fungere på dit GoHighLevel-site:

Forskellige typer kommentarbokse

Du kan konfigurere linjen TYPE = 'commenting' for at skifte det anvendte produkt (for eksempel kan du ændre den til live for streamingchat eller collab for collab-chat).

Placering af kommentarboksen hvor du vil

Lad os sige, at du vil placere kommentarbokse på bestemte dele af siden og ikke på standardplaceringerne. Skift denne linje:

const TARGET_ELEMENT_ID = ''; // angiv for at bruge target-div-tilstand

Til:

const TARGET_ELEMENT_ID = 'fc_box'; // angiv for at bruge target-div-tilstand

Derefter skal du i GHL-editoren klikke på "code"-knappen og tilføje, hvor du vil have kommentarerne skal vises:

GoHighLevel FastComments-div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Forskellig kommentarboks-type pr. side

Lad os sige, at du vil lade brugere fremhæve og diskutere tekststykker eller i stedet bruge streamingchat-brugerfladen.

Følg først trinnene ovenfor under "Placering af kommentarboksen hvor du vil".

Bemærk, at der i den lille kodeudsnit står type="commenting".

Hvis du for eksempel vil aktivere collab-chat, skal du ændre typen til type="collab".

Vis kun på bestemte sider

Hvis du ikke sætter TARGET_ELEMENT_ID, kan du i stedet konfigurere variablen VALID_PATTERNS for at angive, hvilke URL-ruter kommentarerne skal vises på. Som standard vises de på sider, der indeholder /post i URL'en.

Konfiguration af collab-chat

Du kan få collab-chat til kun at tilføje kollaborativ funktionalitet omkring HTML inden for et bestemt område. For eksempel, hvis du tilføjer footer-koden ovenfor og derefter indsætter denne div i post-/sideindholdet for at aktivere collab-chat:

Collab-chat med angivet indhold

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

Så vil paragraf-elementet inde i <div> have collab-chat aktiveret, og intet andet på siden. Hvis du ikke lægger noget indhold i <div>, vil det aktivere collab-chat for hele indlæggets indhold.

Nu hvor vi har kopieret vores kodeudsnit, indsæt det i Footer Code-sektionen som vist:

Indsæt kode

Det var det! Du skulle nu have live-kommentering tilføjet til dit GoHighLevel-kursus.

Succes

Hvis du er stødt på en permission denied-fejl, eller ønsker at tilpasse FastComments, så læs videre.

FastComments er designet til at blive tilpasset, så det matcher dit websted.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores tilpasningsdokumentation for at lære hvordan.

Først åbner vi editoren for den side på vores site, hvor vi ønsker at tilføje kommentarer.

Åbn editor

Find nu det sted på siden, hvor du vil tilføje kommentarer. Før musen hen mod slutningen af det område. Et +-ikon vil dukke op:

Tilføj sektion

Hvis vi klikker på det, spørger den hvor mange kolonner den nye sektion skal have. Vi vælger 1 COLUMN:

Tilføj en kolonne

Hvis du nu bevæger musen over den nye række med 1 kolonne, får du muligheden for at tilføje et element. Klik på den:

Tilføj element

Rul ned og vælg CUSTOM JS/HTML:

Vælg CUSTOM JS/HTML

Vælg nu vores nye element og klik på Open Code Editor til venstre:

Åbn kodeeditor

Det er tid til at kopiere vores kode. Kopier følgende kode:

GoHighLevel sidekommentarer kode

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 // Ændringer af History API til SPA-understøttelse

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 // Funktion for at sikre, at scriptet er indlæst

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Tjek om script-tag allerede findes

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 // Script-tag findes og er allerede indlæst

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

66 resolve();

67 } else {

68 // Script-tag findes, men er ikke klar endnu

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

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

71 resolve();

72 });

73

74 // Fallback hvis scriptet allerede er ved at blive indlæst

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Timeout efter 10 sekunder

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Hoved-renderfunktion

93 async function render() {

94 rendered = false;

95

96 // Sørg for at scriptet er indlæst før fortsættelse

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Dobbelt-tjek at FastCommentsUI er tilgængelig

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 // Hent nuværende URL som urlId

117 const newUrlId = window.location.pathname;

118

119 // Tjek om vi skal gen-render (urlId ændret eller første render)

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

121 currentUrlId = newUrlId;

122

123 // Ødelæg tidligere instans hvis den eksisterer

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Ryd containerens indhold

127 container.innerHTML = '';

128 }

129

130 // Forbered konfiguration

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 // Overvåg om containeren fjernes eller URL ændres

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 // Initial render when DOM is ready

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

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

177 } else {

178 render();

179 }

180

181 // Re-render on location change (for SPAs)

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

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

184 render();

185 });

186 })();

187</script>

188

Indsæt det i editorvinduet, vi åbnede:

Indsæt kode

Vi kan nu klikke på Yes, Save i nederste højre hjørne af det vindue.

Øverst på siden skal du nu klikke på Save og derefter på Preview.

Det var det! Du burde nu have live-kommentarer tilføjet til dit GoHighLevel-websted.

Succes

Hvis du er stødt på en 'permission denied'-fejl, eller ønsker at tilpasse FastComments, så læs videre.

FastComments er designet til at kunne tilpasses, så det matcher dit websted.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores dokumentation om tilpasning og konfiguration for at se hvordan.