Add Comments to GoHighLevel Sites

Primeiro, vamos editar as configurações do nosso curso.

Para fazer isso, abra o curso e clique em Edit Details.

Editar Detalhes do Curso

Em seguida, precisamos abrir as configurações Advanced:

Abrir Configurações Avançadas

Vamos adicionar nosso código à seção Tracking Code. Vá para essa seção e clique em Footer Code.

Now we're going to generate your custom FastComments code. Use the wizard below to configure how you want FastComments to work on your GoHighLevel site:

Different Comment Box Types

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).

Putting The Comment Box Where You Want

Let's say you want to put comment boxes on specific parts of the page and not the default locations. Change this line:

const TARGET_ELEMENT_ID = ''; // definir para usar o modo de div alvo

To:

const TARGET_ELEMENT_ID = 'fc_box'; // definir para usar o modo de div alvo

Then in the GHL editor, click the "code" button and add where you want the comments to go:

Div do FastComments no GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Different Comment Box Type Per-Page

Let's say you want users to highlight and discuss pieces of text, or use the streaming chat UI instead.

First follow the steps above in "Putting The Comment Box Where You Want".

Note in that small snippet there's type="commenting".

If you want to enable collab chat for example change type to type="collab".

Only Show On Specific Pages

If you don't set TARGET_ELEMENT_ID, you can instead configure the VALID_PATTERNS variable, to set which URL routes the comments should show. By default, it will show on pages that contain /post in the URL.

Configuring Collab Chat

You can tell collab chat to only add collaborative functionality around HTML inside a specific area, for example, let's say you add the footer code above and then add this div in the post/page content to enable collab chat:

Collab Chat com Conteúdo Especificado

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

Then the paragraph element inside the <div> will have collab chat enabled, and nothing else on the page. If you don't put any content in the <div> then it will enable collab chat on the entire post body.

Agora que copiamos nosso trecho, cole-o na seção Footer Code como mostrado:

Colar Código

Isso é tudo! Agora você deve ter comentários ao vivo adicionados ao seu curso GoHighLevel.

Sucesso

Se você se deparou com um erro de permissão negada, ou gostaria de personalizar o FastComments, continue lendo.

FastComments foi projetado para ser personalizado para combinar com seu site.

Se você quiser adicionar estilos personalizados, ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.

Primeiro, vamos abrir o editor da página do nosso site na qual queremos adicionar comentários.

Abrir Editor

Agora encontre o lugar na página onde você quer adicionar comentários. Mova o mouse em direção ao final dessa área. Um ícone + aparecerá:

Adicionar Seção

Se clicarmos nele, ele nos perguntará quantas colunas a nova seção deve ter. Vamos selecionar 1 COLUMN:

Adicionar uma Coluna

Agora, se você mover o mouse sobre a nova linha de 1 coluna, você terá a opção de adicionar um elemento. Clique nisso:

Adicionar Elemento

Role para baixo e escolha CUSTOM JS/HTML:

Selecionar CUSTOM JS/HTML

Agora selecione nosso novo elemento e clique em Open Code Editor à esquerda:

Abrir Editor de Código

É hora de copiar nosso código. Copie o código a seguir:

Código de Comentários do Site 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 // Modificações na History API para suporte a 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 // Função para garantir que o script seja carregado

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Verifica se a tag de script já existe

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 // A tag do script existe e já foi carregada

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

66 resolve();

67 } else {

68 // A tag do script existe mas ainda não está pronta

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

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

71 resolve();

72 });

73

74 // Solução alternativa caso o script já esteja carregando

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Tempo limite após 10 segundos

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Função principal de renderização

93 async function render() {

94 rendered = false;

95

96 // Ensure script is loaded before proceeding

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Verifica novamente se FastCommentsUI está disponível

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 // Obtém a URL atual como urlId

117 const newUrlId = window.location.pathname;

118

119 // Verifica se precisamos renderizar novamente (urlId mudou ou é a primeira renderização)

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

121 currentUrlId = newUrlId;

122

123 // Destrói a instância anterior, se existir

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Limpa o conteúdo do container

127 container.innerHTML = '';

128 }

129

130 // Prepara a configuração

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Inicializa o 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 // Monitora se o container for removido ou se a URL mudar

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 // Renderização inicial quando o DOM estiver pronto

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

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

177 } else {

178 render();

179 }

180

181 // Re-renderiza ao mudar a localização (para SPAs)

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

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

184 render();

185 });

186 })();

187</script>

188

Cole isso na janela do editor que abrimos:

Colar Código

Agora podemos clicar em Yes, Save no canto inferior direito dessa janela.

No topo da página agora clique em Save e depois em Preview.

É isso! Agora você deve ter comentários em tempo real adicionados ao seu site GoHighLevel.

Sucesso

Se você encontrou um erro de permissão negada, ou gostaria de personalizar o FastComments, continue lendo.

FastComments foi projetado para ser personalizado para combinar com o seu site.

Se você quiser adicionar estilos personalizados ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.