Προσθήκη Σχολίων σε Ιστότοπους GoHighLevel

Πρώτα, θα επεξεργαστούμε τις ρυθμίσεις για το μάθημά μας.

Για να το κάνετε αυτό, ανοίξτε το μάθημα, και κάντε κλικ στο 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" και προσθέστε το σημείο όπου θέλετε να εμφανίζονται τα σχόλια:

Div FastComments για GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

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

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

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

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

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

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

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

Ρύθμιση Collab Chat

Μπορείτε να πείτε στο collab chat να προσθέτει λειτουργικότητα συνεργασίας μόνο γύρω από HTML μέσα σε μια συγκεκριμένη περιοχή, για παράδειγμα, ας πούμε ότι προσθέτετε τον κώδικα footer παραπάνω και στη συνέχεια προσθέτετε αυτό το 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

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

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

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

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

Επιτυχία

Εάν αντιμετωπίσατε σφάλμα άρνησης άδειας ή θέλετε να προσαρμόσετε το FastComments, συνεχίστε την ανάγνωση.

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

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

Πρώτα, θα ανοίξουμε τον επεξεργαστή για τη σελίδα του ιστότοπού μας στην οποία θέλουμε να προσθέσουμε σχόλια.

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

Τώρα βρείτε το σημείο της σελίδας όπου θέλετε να προσθέσετε σχόλια. Μετακινήστε το ποντίκι σας προς το τέλος αυτής της περιοχής. Θα εμφανιστεί ένα εικονίδιο +:

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

Αν κάνουμε κλικ σε αυτό, μας ρωτά πόσες στήλες θα έχει η νέα ενότητα. Θα επιλέξουμε 1 COLUMN:

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

Τώρα, αν μετακινήσετε το ποντίκι πάνω από τη νέα σειρά μίας στήλης, θα έχετε τη δυνατότητα να προσθέσετε ένα στοιχείο. Κάντε κλικ σε αυτό:

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

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

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Έλεγχος εάν το script tag υπάρχει ήδη

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(); // Επιλύεται ούτως ή άλλως για να αποφευχθεί το κρέμασμα

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

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