Add Comments to GoHighLevel Sites

Αρχικά, θα επεξεργαστούμε τις ρυθμίσεις του μαθήματός μας.

Για να το κάνετε, ανοίξτε το μάθημα και κάντε κλικ στο Edit Details.

Επεξεργασία λεπτομερειών μαθήματος

Έπειτα, πρέπει να ανοίξουμε τις ρυθμίσεις Advanced:

Άνοιγμα Σύνθετων Ρυθμίσεων

Θα προσθέσουμε τον κώδικά μας στην ενότητα Tracking Code. Μεταβείτε σε αυτήν την ενότητα και κάντε κλικ στο Footer Code.

Τώρα θα δημιουργήσουμε τον προσαρμοσμένο κώδικα FastComments σας. Χρησιμοποιήστε τον οδηγό παρακάτω για να ρυθμίσετε πώς θέλετε να λειτουργεί το FastComments στον ιστότοπό σας GoHighLevel:

Διάφοροι Τύποι Πλαισίου Σχολίων

Μπορείτε να διαμορφώσετε τη γραμμή TYPE = 'commenting' για να αλλάξετε το χρησιμοποιούμενο προϊόν (για παράδειγμα μπορείτε να την αλλάξετε σε live για streaming chat ή σε collab για collab chat).

Τοποθέτηση του Πλαισίου Σχολίων Όπου Θέλετε

Ας πούμε ότι θέλετε να τοποθετήσετε πλαίσια σχολίων σε συγκεκριμένα μέρη της σελίδας και όχι στις προεπιλεγμένες θέσεις. Αλλάξτε αυτή τη γραμμή:

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

Σε:

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

Στη συνέχεια, στον επεξεργαστή GHL, πατήστε το κουμπί "code" και προσθέστε το εκεί όπου θέλετε να εμφανίζονται τα σχόλια:

FastComments Div για GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Διαφορετικός Τύπος Πλαισίου Σχολίων Ανά Σελίδα

Ας πούμε ότι θέλετε οι χρήστες να επισημαίνουν και να συζητούν κομμάτια κειμένου, ή να χρησιμοποιούν αντ' αυτού το περιβάλλον streaming chat.

Πρώτα ακολουθήστε τα βήματα πιο πάνω στην ενότητα "Τοποθέτηση του Πλαισίου Σχολίων Όπου Θέλετε".

Σημειώστε ότι στο μικρό εκείνο απόσπασμα υπάρχει type="commenting".

Αν θέλετε να ενεργοποιήσετε το collab chat για παράδειγμα, αλλάξτε το type σε type="collab".

Εμφάνιση Μόνο σε Συγκεκριμένες Σελίδες

Αν δεν ορίσετε το TARGET_ELEMENT_ID, μπορείτε αντ' αυτού να διαμορφώσετε τη μεταβλητή VALID_PATTERNS, για να ορίσετε ποιες διαδρομές URL θα εμφανίζουν τα σχόλια. Από προεπιλογή, θα εμφανίζονται σε σελίδες που περιέχουν /post στο URL.

Διαμόρφωση Collab Chat

Μπορείτε να ορίσετε το collab chat ώστε να προσθέτει λειτουργίες συνεργασίας μόνο γύρω από HTML εντός μιας συγκεκριμένης περιοχής, για παράδειγμα, ας υποθέσουμε ότι προσθέτετε τον κώδικα υποσέλιδου πιο πάνω και μετά προσθέτετε αυτό το div στο περιεχόμενο της ανάρτησης/σελίδας για να ενεργοποιήσετε το collab chat:

Collab Chat με Καθορισμένο Περιεχόμενο

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 chat, και τίποτα άλλο στη σελίδα. Αν δεν βάλετε κανένα περιεχόμενο στο <div> τότε θα ενεργοποιήσει το collab chat σε ολόκληρο το σώμα της ανάρτησης.

Τώρα που έχουμε αντιγράψει το απόσπασμά μας, επικολλήστε το στην ενότητα Footer Code όπως φαίνεται:

Επικόλληση Κώδικα

Αυτό ήταν! Τώρα θα πρέπει να έχετε προσθέσει σχολιασμό σε πραγματικό χρόνο στο μάθημά σας στο GoHighLevel.

Επιτυχία

Εάν συναντήσατε σφάλμα 'permission denied', ή θέλετε να προσαρμόσετε το FastComments, διαβάστε παρακάτω.

Το FastComments έχει σχεδιαστεί για να προσαρμόζεται ώστε να ταιριάζει με τον ιστότοπό σας.

Αν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να τροποποιήσετε τις ρυθμίσεις, Δείτε την τεκμηρίωση προσαρμογών μας για να μάθετε πώς.

First, we're going to open the editor for the page of our site we want to add comments to.

Άνοιγμα Επεξεργαστή

Now find the place on the page where you want to add comments. Move your mouse toward the end of that area. A + icon will appear:

Προσθήκη Ενότητας

If we click that it asks us how many columns should the new section be. We'll select 1 COLUMN:

Προσθήκη Στήλης

Now if you move your mouse over the new 1-column-row you'll have the option to add an element. Click that:

Προσθήκη Στοιχείου

Scroll down and pick CUSTOM JS/HTML:

Επιλέξτε CUSTOM JS/HTML

Now select our new element and click Open Code Editor on the left:

Άνοιγμα Επεξεργαστή Κώδικα

Είναι ώρα να αντιγράψουμε τον κώδικά μας. Αντιγράψτε τον παρακάτω κώδικα:

Κώδικας σχολίων ιστότοπου 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 // Συνάρτηση για να διασφαλιστεί ότι το script έχει φορτωθεί

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Έλεγχος αν το tag 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 // Το tag script υπάρχει και έχει ήδη φορτωθεί

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

66 resolve();

67 } else {

68 // Το tag script υπάρχει αλλά δεν είναι ακόμα έτοιμο

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

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

71 resolve();

72 });

73

74 // Εναλλακτική μέθοδος σε περίπτωση που το script ήδη φορτώνεται

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 // Διασφαλίστε ότι το script έχει φορτωθεί πριν προχωρήσετε

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 // Εκκαθάριση του περιεχομένου του container

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 // Παρακολούθηση αν το container αφαιρεθεί ή αλλάξει το 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 // Επανα-απόδοση σε αλλαγή τοποθεσίας (για 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 έχει σχεδιαστεί ώστε να προσαρμόζεται για να ταιριάζει στον ιστότοπό σας.

Αν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να τροποποιήσετε τη διαμόρφωση, Δείτε την Τεκμηρίωση Προσαρμογής μας για να μάθετε πώς.