Добавяне на коментари към сайтове GoHighLevel

Първо ще редактираме настройките за нашия курс.

За да направите това, отворете курса, и кликнете върху Edit Details.

Редактиране на подробности за курса

След това трябва да отворим настройките Advanced:

Отворете разширените настройки

Ще добавим нашия код в секцията Tracking Code. Отидете в тази секция и кликнете върху Footer Code.

Сега ще генерираме вашия персонализиран FastComments код. Използвайте съветника по-долу, за да конфигурирате как FastComments да работи на вашия GoHighLevel сайт:

Различни типове коментарни кутии

Можете да конфигурирате реда TYPE = 'commenting', за да смените използвания продукт (например можете да го промените на live за чат в реално време или collab за колаборативен чат).

Поставяне на коментарната кутия там, където искате

Да речем, че искате да поставите коментарни кутии на конкретни части от страницата, а не на местоположенията по подразбиране. Променете този ред:

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

На:

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

След това в GHL редактора кликнете бутона "code" и добавете там, където искате да се показват коментарите:

GoHighLevel FastComments Div

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Различен тип коментарна кутия за всяка страница

Да речем, че искате потребителите да маркират и обсъждат части от текста, или да използват интерфейса за чат в реално време.

Първо следвайте стъпките по-горе в "Поставяне на коментарната кутия там, където искате".

Обърнете внимание, че в този малък фрагмент има type="commenting".

Ако искате да активирате колаборативен чат например, променете типа на type="collab".

Показване само на конкретни страници

Ако не зададете TARGET_ELEMENT_ID, можете вместо това да конфигурирате променливата VALID_PATTERNS, за да определите на кои URL маршрути да се показват коментарите. По подразбиране те ще се показват на страници, чиито URL съдържа /post.

Конфигуриране на колаборативен чат

Можете да укажете на колаборативния чат да добавя колаборативна функционалност само около HTML в конкретна област, например, да речем, че добавите горния код за футъра и след това добавите този div в съдържанието на публикацията/страницата, за да активирате колаборативния чат:

Колаборативен чат с определено съдържание

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

Тогава елементът параграф вътре в <div> ще има активиран колаборативен чат, а нищо друго на страницата. Ако не поставите съдържание в <div>, колаборативният чат ще бъде активиран за цялото тяло на публикацията.

Сега, след като копирахме фрагмента си, поставете го в секцията Footer Code, както е показано:

Поставете кода

Това е всичко! Сега трябва да имате добавени коментари в реално време към вашия курс GoHighLevel.

Успех

Ако сте получили грешка 'permission denied', или искате да персонализирате FastComments, продължете да четете.

FastComments е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да промените конфигурацията, Вижте нашата документация за персонализиране за да научите как.

Първо ще отворим редактора за страницата на нашия сайт, към която искаме да добавим коментари.

Отворете редактора

Сега намерете мястото на страницата, където искате да добавите коментари. Преместете мишката си към края на тази област. Ще се появи икона +:

Добавете секция

Ако щракнем върху нея, ще ни попита на колко колони да бъде новата секция. Ще изберем 1 COLUMN:

Добавете колона

Сега, ако преместите мишката си върху новия ред с 1 колона, ще имате опция да добавите елемент. Щракнете върху нея:

Добавете елемент

Превъртете надолу и изберете CUSTOM JS/HTML:

Изберете CUSTOM JS/HTML

Сега изберете нашия нов елемент и щракнете върху Open Code Editor отляво:

Отворете редактора на код

Време е да копирате нашия код. Копирайте следния код:

Код за коментари за 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 // Модификации на History API за поддръжка на 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 // Функция за гарантиране, че скриптът е зареден

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Проверка дали елементът script вече съществува

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 съществува и вече е зареден

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

66 resolve();

67 } else {

68 // Елементът script съществува, но все още не е готов

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

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

71 resolve();

72 });

73

74 // Резервен механизъм в случай че скриптът вече се зарежда

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Таймаут след 10 секунди

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Основна функция за рендиране

93 async function render() {

94 rendered = false;

95

96 // Ensure script is loaded before proceeding

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Допълнителна проверка дали FastCommentsUI е наличен

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 // Вземане на текущия URL като urlId

117 const newUrlId = window.location.pathname;

118

119 // Проверка дали трябва да рендерираме отново (urlId се е променил или първо рендериране)

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

121 currentUrlId = newUrlId;

122

123 // Унищожаване на предишния инстанс, ако съществува

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Изчистване на съдържанието на контейнера

127 container.innerHTML = '';

128 }

129

130 // Подготовка на конфигурацията

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Инициализация на 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 // Наблюдение дали контейнерът е премахнат или URL се е променил

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 // Първоначално рендиране когато DOM е готов

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

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

177 } else {

178 render();

179 }

180

181 // Пререндиране при промяна на локацията (за SPA)

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

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

184 render();

185 });

186 })();

187</script>

188

Поставете това в прозореца на редактора, който отворихме:

Поставете кода

Сега можем да кликнем на Yes, Save в долния десен ъгъл на този прозорец.

В горната част на страницата сега кликнете на Save и след това на Preview.

Това е всичко! Трябва вече да имате добавена функция за коментиране в реално време на вашия сайт в GoHighLevel.

Успех

Ако сте получили грешка 'permission denied', или искате да персонализирате FastComments, продължете да четете.

FastComments е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирано оформление или да настроите конфигурацията, Вижте нашата документация за персонализиране, за да научите как.