Add Comments to GoHighLevel Sites

İlk olarak, kursumuzun ayarlarını düzenleyeceğiz.

Bunu yapmak için kursu açın ve Edit Details'e tıklayın.

Kurs Detaylarını Düzenle

Bir sonraki adımda, Advanced ayarlarını açmamız gerekiyor:

Gelişmiş Ayarları Aç

Kodumuzu Tracking Code bölümüne ekleyeceğiz. O bölüme gidin ve Footer Code'a tıklayın.

Şimdi özel FastComments kodunuzu oluşturacağız. FastComments'in GoHighLevel sitenizde nasıl çalışmasını istediğinizi yapılandırmak için aşağıdaki sihirbazı kullanın:

Farklı Yorum Kutusu Türleri

Kullanılan ürünü değiştirmek için TYPE = 'commenting' satırını yapılandırabilirsiniz (örneğin, canlı akış sohbeti için live veya işbirlikçi sohbet için collab olarak değiştirebilirsiniz).

Yorum Kutusunu İstediğiniz Yere Yerleştirme

Varsayalım ki yorum kutularını sayfanın belirli bölümlerine, varsayılan konumlar yerine yerleştirmek istiyorsunuz. Bu satırı değiştirin:

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

Şununla:

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

Ardından GHL düzenleyicisinde "code" butonuna tıklayın ve yorumların gitmesini istediğiniz yere ekleyin:

GoHighLevel FastComments Div (div öğesi)

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Sayfa Başına Farklı Yorum Kutusu Türü

Varsayalım ki kullanıcıların metin parçalarını vurgulayıp tartışmasını veya bunun yerine akış sohbeti kullanıcı arayüzünü kullanmasını istiyorsunuz.

Önce "Yorum Kutusunu İstediğiniz Yere Yerleştirme" bölümündeki adımları izleyin.

O küçük kod parçasında type="commenting" olduğunu unutmayın.

Örneğin collab sohbetini etkinleştirmek isterseniz type'ı type="collab" olarak değiştirin.

Sadece Belirli Sayfalarda Göster

Eğer TARGET_ELEMENT_ID'yi ayarlamazsanız, bunun yerine hangi URL yollarında yorumların gösterileceğini belirlemek için VALID_PATTERNS değişkenini yapılandırabilirsiniz. Varsayılan olarak, URL'de /post içeren sayfalarda gösterir.

Collab Sohbetini Yapılandırma

Collab sohbetine, işbirlikçi işlevselliği yalnızca belirli bir alan içindeki HTML etrafına eklemesini söyleyebilirsiniz; örneğin, diyelim ki siz yukarıdaki footer kodunu eklediniz ve ardından collab sohbetini etkinleştirmek için post/sayfa içeriğine bu div'i eklediniz:

Belirli İçerikle Collab Sohbeti

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

Daha sonra <div> içindeki paragraf öğesinde collab sohbeti etkinleştirilecek, ve sayfadaki diğer hiçbir şey etkilenmeyecek. Eğer <div> içine hiç içerik koymazsanız o zaman collab sohbeti tüm gönderi gövdesinde etkinleştirilir.

Kod parçacığımızı kopyaladığımıza göre, gösterildiği gibi Footer Code bölümüne yapıştırın:

Kodu Yapıştır

Hepsi bu kadar! Artık GoHighLevel kursunuza canlı yorum eklenmiş olmalı.

Başarılı

Eğer 'permission denied' hatasıyla karşılaştıysanız veya FastComments'i özelleştirmek istiyorsanız, okumaya devam edin.

FastComments, sitenize uyacak şekilde özelleştirilebilmesi için tasarlanmıştır.

Eğer özel stil eklemek veya yapılandırmayı ayarlamak isterseniz, nasıl yapılacağını öğrenmek için Özelleştirme Belgelerimizi İnceleyin sayfasına bakın.

İlk olarak, yorum eklemek istediğimiz site sayfasının editörünü açacağız.

Editörü Aç

Şimdi sayfada yorum eklemek istediğiniz yeri bulun. Fareyi o alanın sonuna doğru hareket ettirin. Bir + simgesi görünecektir:

Bölüm Ekle

Buna tıkladığımızda yeni bölümün kaç sütunlu olması gerektiğini sorar. 1 COLUMN'ı seçeceğiz:

Bir Sütun Ekle

Şimdi fareyi yeni 1 sütunlu satırın üzerine getirirseniz öğe ekleme seçeneği olacaktır. Buna tıklayın:

Öğe Ekle

Aşağı kaydırın ve CUSTOM JS/HTML'i seçin:

CUSTOM JS/HTML'i Seçin

Şimdi yeni öğemizi seçin ve soldaki Open Code Editor'a tıklayın:

Kod Editörünü Aç

It's time to copy our code. Copy the following code:

GoHighLevel Site Yorumları Kodu

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 desteği için History API değişiklikleri

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 // Scriptin yüklendiğinden emin olmak için fonksiyon

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Script etiketinin zaten var olup olmadığını kontrol et

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 // Script etiketi mevcut ve zaten yüklü

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

66 resolve();

67 } else {

68 // Script etiketi mevcut ama henüz hazır değil

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

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

71 resolve();

72 });

73

74 // Script zaten yükleniyorsa yedek plan

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // 10 saniye sonra zaman aşımı

83 setTimeout(() => {

84 clearInterval(checkInterval);

85 console.warn('FastComments: Script load timeout');

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Ana render fonksiyonu

93 async function render() {

94 rendered = false;

95

96 // İlerlemeden önce scriptin yüklendiğinden emin ol

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // FastCommentsUI'nin mevcut olup olmadığını çift kontrol et

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 // Geçerli URL'yi urlId olarak al

117 const newUrlId = window.location.pathname;

118

119 // Yeniden render gerekip gerekmediğini kontrol et (urlId değişti veya ilk render)

120 if (currentUrlId !== newUrlId || !lastInstance) {

121 currentUrlId = newUrlId;

122

123 // Önceki örneği varsa yok et

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Konteyner içeriğini temizle

127 container.innerHTML = '';

128 }

129

130 // Konfigürasyonu hazırla

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

136 console.log('FastComments: Using urlId:', newUrlId);

137

138 // FastComments'i başlat

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 // Konteynerin kaldırılıp kaldırılmadığını veya URL'nin değişip değişmediğini izle

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 hazır olduğunda ilk render

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

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

177 } else {

178 render();

179 }

180

181 // Konum değiştiğinde (SPA'lar için) yeniden render

182 window.addEventListener('locationchange', function () {

183 console.log('FastComments: Location changed, updating...');

184 render();

185 });

186 })();

187</script>

188

Paste that in the editor window we opened:

Kodu Yapıştır

We can now click Yes, Save on the bottom right of that window.

At the top of the page now click Save and then Preview.

Hepsi bu kadar! Artık GoHighLevel sitenize canlı yorum özelliği eklenmiş olmalı.

Başarılı

Eğer bir 'permission denied' hatasıyla karşılaştıysanız veya FastComments'i özelleştirmek istiyorsanız, okumaya devam edin.

FastComments, sitenize uyacak şekilde özelleştirilmek üzere tasarlanmıştır.

Özel stiller eklemek veya yapılandırmayı ayarlamak istiyorsanız, nasıl yapılacağını öğrenmek için Özelleştirme Belgelerimizi İnceleyin.