Add Comments to GoHighLevel Sites

ראשית, נשנה את ההגדרות של הקורס שלנו.

כדי לעשות זאת, פתח את הקורס ולחץ על Edit Details.

ערוך את פרטי הקורס

כעת עלינו לפתוח את ההגדרות של Advanced:

פתח את ההגדרות המתקדמות

נוסיף את הקוד שלנו לקטע Tracking Code. עבור אל אותו קטע ולחץ על Footer Code.

עכשיו אנחנו הולכים ליצור את קוד FastComments המותאם עבורך. השתמש בעוזר למטה כדי להגדיר כיצד תרצה ש-FastComments יעבוד באתר GoHighLevel שלך:

סוגי תיבות תגובה

You can configure the TYPE = 'commenting' line to switch the product used (for example you can change it to live for streaming chat or collab for collab chat).

הצבת תיבת התגובות במקום הרצוי

נניח שברצונך לשים תיבות תגובה בחלקים ספציפיים של הדף ולא במיקומים ברירת המחדל. שנה שורה זו:

const TARGET_ELEMENT_ID = ''; // קבע כדי להשתמש במצב div של היעד

אל:

const TARGET_ELEMENT_ID = 'fc_box'; // קבע כדי להשתמש במצב div של היעד

לאחר מכן בעורך GHL, לחץ על כפתור "קוד" והוסף את המקום שבו אתה רוצה שהתגובות יופיעו:

תיבת FastComments של GoHighLevel

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 בתוך אזור מסוים. לדוגמה, נניח שהוספת את קוד ה-footer שלמעלה ואז הוספת את ה-div הזה בתוכן הפוסט/העמוד כדי לאפשר את צ'אט Collab:

צאט Collab עם תוכן מוגדר

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 על כל גוף הפוסט.

כעת, לאחר שהעתקנו את קטע הקוד שלנו, הדבק אותו בסעיף 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 // בדוק אם תג הסקריפט כבר קיים

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 // פונקציית רינדור ראשית

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 // Initial render when DOM is ready

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

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

177 } else {

178 render();

179 }

180

181 // Re-render on location change (for SPAs)

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 תוכנן כך שניתן להתאימו כדי שיתאים לאתר שלך.

אם ברצונך להוסיף עיצוב מותאם אישית או לשנות תצורה, עיין בתיעוד ההתאמה והקונפיגורציה שלנו כדי ללמוד כיצד.