Add Comments to GoHighLevel Sites

Najpierw edytujemy ustawienia naszego kursu.

Aby to zrobić, otwórz kurs i kliknij Edit Details.

Edytuj szczegóły kursu

Następnie musimy otworzyć ustawienia Advanced:

Otwórz ustawienia zaawansowane

Dodamy nasz kod do sekcji Tracking Code. Przejdź do tej sekcji i kliknij Footer Code.

Teraz wygenerujemy dla Ciebie niestandardowy kod FastComments. Użyj poniższego kreatora, aby skonfigurować, jak chcesz, aby FastComments działał na Twojej stronie GoHighLevel:

Różne typy okienka komentarzy

Możesz skonfigurować linię TYPE = 'commenting', aby przełączyć używany produkt (na przykład możesz zmienić ją na live dla czatu na żywo lub collab dla czatu kolaboracyjnego).

Umieszczanie okienka komentarzy tam, gdzie chcesz

Załóżmy, że chcesz umieścić pola komentarzy w konkretnych częściach strony, a nie w domyślnych miejscach. Zmień tę linię:

const TARGET_ELEMENT_ID = ''; // ustaw, aby użyć trybu docelowego elementu div

Na:

const TARGET_ELEMENT_ID = 'fc_box'; // ustaw, aby użyć trybu docelowego elementu div

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

Div FastComments dla GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Różny typ okienka komentarzy na stronę

Załóżmy, że chcesz, aby użytkownicy mogli wyróżniać i dyskutować fragmenty tekstu lub zamiast tego korzystać z interfejsu czatu na żywo.

Najpierw wykonaj powyższe kroki z sekcji „Umieszczanie okienka komentarzy tam, gdzie chcesz”.

Note in that small snippet there's type="commenting".

If you want to enable collab chat for example change type to type="collab".

Wyświetlaj tylko na wybranych stronach

Jeśli nie ustawisz TARGET_ELEMENT_ID, możesz zamiast tego skonfigurować zmienną VALID_PATTERNS, aby określić, na których trasach URL mają się wyświetlać komentarze. Domyślnie będą one wyświetlane na stronach, których URL zawiera /post.

Konfigurowanie czatu kolaboracyjnego

Możesz skonfigurować czat kolaboracyjny tak, aby dodawał funkcje współpracy tylko wokół HTML-a wewnątrz określonego obszaru, na przykład załóżmy, że dodałeś powyższy kod w stopce, a następnie dodajesz ten div w treści posta/strony, aby włączyć czat kolaboracyjny:

Czat kolaboracyjny z określoną zawartością

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

Wówczas element paragrafu wewnątrz <div> będzie miał włączony czat kolaboracyjny, a nic więcej na stronie. Jeśli nie umieścisz żadnej zawartości w <div>, wówczas włączy to czat kolaboracyjny dla całej treści posta.

Po skopiowaniu naszego fragmentu, wklej go w sekcji Footer Code, jak pokazano:

Wklej kod

To wszystko! Komentowanie na żywo powinno być teraz dodane do twojego kursu GoHighLevel.

Sukces

Jeśli napotkałeś błąd 'permission denied', lub chcesz dostosować FastComments, czytaj dalej.

FastComments został zaprojektowany tak, aby można go było dostosować do Twojej strony.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Zapoznaj się z dokumentacją dotyczącą dostosowań, aby dowiedzieć się, jak to zrobić.

Najpierw otworzymy edytor dla strony naszego serwisu, do której chcemy dodać komentarze.

Otwórz edytor

Znajdź miejsce na stronie, gdzie chcesz dodać komentarze. Przesuń mysz w kierunku końca tego obszaru. Pojawi się ikona +:

Dodaj sekcję

Po kliknięciu zapyta nas, ile kolumn ma mieć nowa sekcja. Wybierzemy 1 COLUMN:

Dodaj kolumnę

Teraz, jeśli najedziesz myszką na nowy wiersz z jedną kolumną, będziesz mieć opcję dodania elementu. Kliknij ją:

Dodaj element

Przewiń w dół i wybierz CUSTOM JS/HTML:

Wybierz CUSTOM JS/HTML

Teraz wybierz nasz nowy element i kliknij po lewej Open Code Editor:

Otwórz edytor kodu

Czas skopiować nasz kod. Skopiuj poniższy kod:

Kod komentarzy strony 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 // Modyfikacje History API dla wsparcia 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 // Funkcja zapewniająca załadowanie skryptu

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Sprawdź, czy znacznik skryptu już istnieje

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(); // Rozwiąż mimo to, aby zapobiec zawieszeniu

60 };

61

62 document.head.appendChild(scriptTag);

63 } else if (window.FastCommentsUI) {

64 // Znacznik skryptu istnieje i jest już załadowany

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

66 resolve();

67 } else {

68 // Znacznik skryptu istnieje, ale jeszcze nie jest gotowy

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

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

71 resolve();

72 });

73

74 // Mechanizm awaryjny na wypadek, gdy skrypt jest w trakcie ładowania

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Limit czasu po 10 sekundach

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Główna funkcja renderująca

93 async function render() {

94 rendered = false;

95

96 // Upewnij się, że skrypt jest załadowany przed kontynuacją

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Podwójne sprawdzenie, czy FastCommentsUI jest dostępne

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 // Pobierz bieżący URL jako urlId

117 const newUrlId = window.location.pathname;

118

119 // Sprawdź, czy trzeba ponownie renderować (urlId się zmienił lub to pierwsze renderowanie)

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

121 currentUrlId = newUrlId;

122

123 // Zniszcz poprzednią instancję, jeśli istnieje

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Wyczyść zawartość kontenera

127 container.innerHTML = '';

128 }

129

130 // Przygotuj konfigurację

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Zainicjuj 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 // Monitoruj, czy kontener zostanie usunięty lub czy URL się zmieni

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 // Początkowe renderowanie, gdy DOM jest gotowy

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

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

177 } else {

178 render();

179 }

180

181 // Ponowne renderowanie przy zmianie lokalizacji (dla SPA)

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

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

184 render();

185 });

186 })();

187</script>

188

Wklej to w oknie edytora, które otworzyliśmy:

Wklej kod

Teraz możemy kliknąć Yes, Save w prawym dolnym rogu tego okna.

Na górze strony kliknij teraz Save, a następnie Preview.

To wszystko! Na Twojej stronie GoHighLevel powinno być teraz dostępne komentowanie na żywo.

Sukces

Jeśli napotkałeś błąd 'permission denied', lub chcesz dostosować FastComments, czytaj dalej.

FastComments został zaprojektowany tak, aby można go było dostosować do Twojej strony.

Jeśli chcesz dodać własne style lub zmienić konfigurację, Przejrzyj naszą dokumentację dotyczącą dostosowywania i konfiguracji, aby dowiedzieć się, jak.