Dodaj komentarze do stron GoHighLevel

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 Twój niestandardowy kod FastComments. Użyj kreatora poniżej, aby skonfigurować sposób działania FastComments na Twojej stronie GoHighLevel:

Różne typy pól 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 współpracy).

Umieszczanie pola komentarzy w wybranym miejscu

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

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

Na:

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

Następnie w edytorze GHL kliknij przycisk "code" i dodaj tam, gdzie mają się znaleźć komentarze:

GoHighLevel FastComments Div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Różny typ pola komentarzy na każdej stronie

Załóżmy, że chcesz, aby użytkownicy mogli wyróżniać i omawiać fragmenty tekstu, albo chcesz użyć interfejsu czatu na żywo.

Najpierw wykonaj powyższe kroki z sekcji "Umieszczanie pola komentarzy w wybranym miejscu".

Zauważ, że w tym małym fragmencie znajduje się type="commenting".

Jeśli chcesz na przykład włączyć czat współpracy, zmień typ na type="collab".

Wyświetlanie tylko na określonych stronach

Jeśli nie ustawisz TARGET_ELEMENT_ID, możesz zamiast tego skonfigurować zmienną VALID_PATTERNS, aby określić, na jakich ścieżkach URL mają się wyświetlać komentarze. Domyślnie będą wyświetlać się na stronach zawierających /post w adresie URL.

Konfiguracja czatu współpracy

Możesz nakazać czatowi współpracy dodawanie funkcji współpracy tylko wokół HTML w określonym obszarze. Na przykład, załóżmy, że dodajesz powyższy kod stopki, a następnie dodajesz ten div w treści wpisu/strony, aby włączyć czat współpracy:

Czat współpracy z określoną treś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

Wtedy element akapitu wewnątrz <div> będzie miał włączony czat współpracy, a nic innego na stronie. Jeśli nie umieścisz żadnej treści w <div>, czat współpracy zostanie włączony na całej treści wpisu.

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.