GoHighLevel साइटों में टिप्पणियाँ जोड़ें

सबसे पहले, हम अपने कोर्स की सेटिंग्स को एडिट करेंगे।

इसके लिए, कोर्स खोलें और Edit Details पर क्लिक करें।

कोर्स डिटेल्स एडिट करें

इसके बाद, हमें Advanced सेटिंग्स खोलनी होंगी:

Advanced सेटिंग्स खोलें

हम अपना कोड Tracking Code सेक्शन में जोड़ेंगे। उस सेक्शन पर जाएँ और Footer Code पर क्लिक करें।

अब हम आपका कस्टम FastComments कोड जनरेट करेंगे। नीचे दिए गए विज़ार्ड का उपयोग करके कॉन्फ़िगर करें कि आपकी GoHighLevel साइट पर FastComments कैसे काम करे:

अलग-अलग कमेंट बॉक्स प्रकार

आप 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

प्रत्येक पेज के लिए अलग कमेंट बॉक्स प्रकार

मान लीजिए आप चाहते हैं कि उपयोगकर्ता टेक्स्ट के हिस्सों को हाइलाइट करके उन पर चर्चा करें, या स्ट्रीमिंग चैट UI का उपयोग करें।

पहले ऊपर "कमेंट बॉक्स को अपनी इच्छित जगह पर रखना" में दिए गए चरणों का पालन करें।

ध्यान दें कि उस छोटे स्निपेट में type="commenting" है।

यदि आप उदाहरण के लिए कोलैब चैट सक्षम करना चाहते हैं तो type को 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 // SPA सपोर्ट के लिए History API में बदलाव

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 करें

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 // मुख्य रेंडर फंक्शन

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 // urlId के रूप में वर्तमान URL लें

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 को आपकी साइट से मेल खाने के लिए अनुकूलित करने के लिए डिज़ाइन किया गया है।

यदि आप कस्टम स्टाइलिंग जोड़ना चाहते हैं, या कॉन्फ़िगरेशन में बदलाव करना चाहते हैं, तो हमारे कस्टमाइज़ेशन दस्तावेज़ीकरण देखें और जानें कि कैसे।