FastComments.com

Add Comments to GoHighLevel Sites

Са FastComments можемо лако додати коментаре уживо на било који сајт изграђен помоћу GoHighLevel.

Имајте на уму да овај туторијал захтева FastComments налог. Препоручује се да прво отворите налог, па се потом вратите овде. You can create an account here.

Прво пријављивање ће осигурати да су генерисани исечци кода већ повезани са вашим налогом.

GoHighLevel сајтови са чланством и остали сајтови

Овај туторијал је подељен на две категорије: сајтови са чланством и обични GoHighLevel сајтови.

Почињемо са упутством за сајтове са чланством.


Корак 1: Уреди курс Internal Link


Прво ћемо уредити поставке нашег курса.

Да бисте то урадили, отворите курс и кликните на Edit Details.

Уреди детаље курса
Уреди детаље курса

Корак 2: Отвори напредна подешавања Internal Link

Затим, потребно је да отворимо Advanced подешавања:

Отворите Напредна подешавања
Отворите Напредна подешавања

Додаћемо наш код у одељак Tracking Code. Идите у тај одељак и кликните Footer Code.

Корак 3: Копирај код Internal Link

Сада ћемо генерисати ваш прилагођени FastComments код. Користите чаробњака испод да конфигуришете како желите да FastComments ради на вашој GoHighLevel локацији:

FastComments Configuration Wizard

Choose the type of commenting experience you want
How should the widget be placed on your pages?
Comma-separated URL patterns (leave empty for all pages)
Your FastComments tenant ID (use "demo" for testing)

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

Можете конфигурисати линију 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 Copy
1
2<div
3 id="fc_box"
4 type="commenting"
5 urlid="custom-chat-id"
6></div>
7

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

Рецимо да желите да корисници истичу и дискутују делове текста, или уместо тога користе кориснички интерфејс за стриминг чет.

Прво пратите кораке из горе наведеног одељка "Постављање поља за коментаре тамо где желите".

Обратите пажњу да у том малом исечку постоји type="commenting".

Ако, на пример, желите да омогућите collab чет, промените type у type="collab".

Прикажи само на одређеним страницама

Ако не подесите не подесите TARGET_ELEMENT_ID, можете уместо тога конфигурисати променљиву VALID_PATTERNS, да одредите на којим URL рутама треба да се приказују коментари. Подразумевано ће се приказивати на страницама које садрже /post у URL-у.

Конфигурисање collab чета

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

Collab чет са одређеним садржајем
Copy 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> имати омогућен collab чет, а ништа друго на страници. Ако не ставите никакав садржај у <div> онда ће то омогућити collab чет за цео садржај поста.


Корак 4: Налепи код Internal Link

Сада када смо копирали наш фрагмент, налепите га у одељак Footer Code као што је приказано:

Налепите код
Налепите код

Успешно подешавање чланског сајта Internal Link


То је то! Сада бисте требали имати омогућено коментарисање уживо на вашем GoHighLevel курсу.

Успешно
Успешно

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


Прилагођавање чланског сајта Internal Link


FastComments је дизајниран да се прилагоди вашем сајту.

Ако желите да додате прилагођене стилове, или да подесите конфигурацију, Погледајте нашу документацију о прилагођавању и конфигурацији да бисте сазнали како.


Корак 1: Додај елемент за прилагођени код Internal Link

Прво ћемо отворити уређивач странице нашег сајта на коју желимо да додамо коментаре.

Отворите уређивач
Отворите уређивач

Сада пронађите место на страници где желите да додате коментаре. Померите миша ка крају тог подручја. Pojaviће се икона +:

Додајте одељак
Додајте одељак

Ако кликнемо на то, пита нас колико колона треба да има нови одељак. Изабраћемо 1 COLUMN:

Додајте колону
Додајте колону

Сада ако померите миша преко новог реда са 1 колоном, биће вам доступна опција додавања елемента. Кликните на њу:

Додајте елемент
Додајте елемент

Скролујте надоле и изаберите CUSTOM JS/HTML:

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

Сада изаберите наш нови елемент и кликните на Open Code Editor са леве стране:

Отворите уређивач кода
Отворите уређивач кода

Корак 2: Копирај и налепи код Internal Link


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

GoHighLevel код коментара сајта
Copy 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 // Провера да ли таг скрипте већ постоји
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 // Таг скрипте постоји и већ је учитан
65 console.log('FastComments: Script already loaded');
66 resolve();
67 } else {
68 // Таг скрипте постоји али још није спреман
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 // Главна функција за приказ (render)
93 async function render() {
94 rendered = false;
95
96 // Осигурај да је скрипта учитана пре наставка
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.


Успешно подешавање сајта Internal Link


То је то! Сада би требало да имате омогућено уживо коментарисање на вашем GoHighLevel сајту.

Успешно
Успешно

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


Прилагођавање сајта Internal Link


FastComments је дизајниран да се прилагоди вашем сајту.

Ако желите да додате прилагођени стил или подесите конфигурацију, Погледајте нашу документацију за прилагођавање да бисте сазнали како.


У закључку

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