Adicionar Comentários aos Sites GoHighLevel

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.

Agora vamos gerar o seu código personalizado do FastComments. Use o assistente abaixo para configurar como você quer que o FastComments funcione no seu site GoHighLevel:

Diferentes Tipos de Caixa de Comentários

Você pode configurar a linha TYPE = 'commenting' para alternar o produto usado (por exemplo, você pode alterá-la para live para chat de transmissão ao vivo ou collab para chat colaborativo).

Colocando a Caixa de Comentários Onde Você Quiser

Digamos que você queira colocar caixas de comentários em partes específicas da página e não nos locais padrão. Altere esta linha:

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

Para:

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

Em seguida, no editor do GHL, clique no botão "code" e adicione onde você quer que os comentários apareçam:

Div do FastComments para GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Tipo Diferente de Caixa de Comentários Por Página

Digamos que você queira que os usuários destaquem e discutam trechos de texto, ou usem a interface de chat de transmissão ao vivo.

Primeiro, siga os passos acima em "Colocando a Caixa de Comentários Onde Você Quiser".

Note que nesse pequeno trecho há type="commenting".

Se você quiser habilitar o chat colaborativo, por exemplo, altere o type para type="collab".

Mostrar Apenas Em Páginas Específicas

Se você não definir TARGET_ELEMENT_ID, você pode, em vez disso, configurar a variável VALID_PATTERNS, para definir em quais rotas de URL os comentários devem aparecer. Por padrão, eles serão exibidos em páginas que contenham /post na URL.

Configurando o Chat Colaborativo

Você pode instruir o chat colaborativo a adicionar funcionalidades colaborativas apenas em torno do HTML dentro de uma área específica. Por exemplo, digamos que você adicione o código de rodapé acima e, em seguida, adicione esta div no conteúdo da postagem/página para habilitar o chat colaborativo:

Chat Colaborativo 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

Então o elemento de parágrafo dentro da <div> terá o chat colaborativo habilitado, e nada mais na página. Se você não colocar nenhum conteúdo na <div>, o chat colaborativo será habilitado em todo o corpo da postagem.

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.