Add Comments to GoHighLevel Sites

Primero, vamos a editar la configuración de nuestro curso.

Para ello, abre el curso y haz clic en Edit Details.

Editar detalles del curso

A continuación, necesitamos abrir la configuración Advanced:

Abrir Ajustes Avanzados

Añadiremos nuestro código en la sección Tracking Code. Ve a esa sección y haz clic en Footer Code.

Ahora vamos a generar tu código personalizado de FastComments. Usa el asistente a continuación para configurar cómo quieres que FastComments funcione en tu sitio de GoHighLevel:

Diferentes tipos de cuadro de comentarios

Puedes configurar la línea TYPE = 'commenting' para cambiar el producto usado (por ejemplo, puedes cambiarla a live para chat en streaming o collab para chat colaborativo).

Colocar el cuadro de comentarios donde quieras

Supongamos que quieres colocar cuadros de comentarios en partes específicas de la página y no en las ubicaciones predeterminadas. Cambia esta línea:

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

A:

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

Entonces, en el editor de GHL, haz clic en el botón "code" y añade donde quieres que vayan los comentarios:

Div de FastComments de GoHighLevel

Copy

1

2<div

3 id="fc_box"

4 type="commenting"

5 urlid="custom-chat-id"

6></div>

7

Diferente tipo de cuadro de comentarios por página

Supongamos que quieres que los usuarios resalten y discutan fragmentos de texto, o que usen en su lugar la interfaz de chat en streaming.

Primero sigue los pasos anteriores en "Colocar el cuadro de comentarios donde quieras".

Fíjate que en ese pequeño fragmento está type="commenting".

Si quieres habilitar, por ejemplo, el chat colaborativo, cambia type a type="collab".

Mostrar solo en páginas específicas

Si no estableces no estableces TARGET_ELEMENT_ID, en su lugar puedes configurar la variable VALID_PATTERNS, para definir en qué rutas de URL deben mostrarse los comentarios. Por defecto, se mostrarán en páginas que contengan /post en la URL.

Configuración del chat colaborativo

Puedes indicar al chat colaborativo que solo añada funcionalidad colaborativa alrededor del HTML dentro de un área específica; por ejemplo, supongamos que añades el código de pie de página arriba y luego agregas este div en el contenido del post/página para habilitar el chat colaborativo:

Chat colaborativo con contenido 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

Entonces el elemento párrafo dentro del <div> tendrá el chat colaborativo habilitado, y nada más en la página. Si no pones ningún contenido en el <div>, entonces habilitará el chat colaborativo en todo el cuerpo de la publicación.

Ahora que hemos copiado nuestro fragmento, pégalo en la sección Footer Code como se muestra:

Pegar código

¡Eso es todo! Ahora deberías tener comentarios en vivo añadidos a tu curso de GoHighLevel.

Éxito

Si te has encontrado con un error de permiso denegado, o deseas personalizar FastComments, sigue leyendo.

FastComments está diseñado para ser personalizado para adaptarse a su sitio.

Si desea agregar estilos personalizados o ajustar la configuración, Consulte nuestra Documentación de Personalización para aprender cómo.

Primero, vamos a abrir el editor de la página de nuestro sitio en la que queremos agregar comentarios.

Abrir el editor

Ahora busca el lugar en la página donde quieres agregar comentarios. Mueve el ratón hacia el final de esa área. Aparecerá un icono +:

Agregar sección

Si hacemos clic en eso nos preguntará cuántas columnas debe tener la nueva sección. Seleccionaremos 1 COLUMN:

Agregar una columna

Ahora, si mueves el ratón sobre la nueva fila de 1 columna tendrás la opción de agregar un elemento. Haz clic en eso:

Agregar elemento

Desplázate hacia abajo y elige CUSTOM JS/HTML:

Seleccionar CUSTOM JS/HTML

Ahora selecciona nuestro nuevo elemento y haz clic en Open Code Editor a la izquierda:

Abrir el editor de código

Es hora de copiar nuestro código. Copia el siguiente código:

Código de comentarios del sitio 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 // Modificaciones de la API de historial para soporte de 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 // Función para asegurar que el script se haya cargado

40 function ensureScriptLoaded() {

41 return new Promise((resolve) => {

42 // Comprobar si la etiqueta script ya 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 // La etiqueta script existe y ya está cargada

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

66 resolve();

67 } else {

68 // La etiqueta script existe pero aún no está lista

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

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

71 resolve();

72 });

73

74 // Mecanismo de respaldo en caso de que el script ya se esté cargando

75 const checkInterval = setInterval(() => {

76 if (window.FastCommentsUI) {

77 clearInterval(checkInterval);

78 resolve();

79 }

80 }, 100);

81

82 // Tiempo de espera (timeout) después de 10 segundos

83 setTimeout(() => {

84 clearInterval(checkInterval);

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

86 resolve();

87 }, 10000);

88 }

89 });

90 }

91

92 // Función principal de renderizado

93 async function render() {

94 rendered = false;

95

96 // Asegurar que el script esté cargado antes de continuar

97 await ensureScriptLoaded();

98

99 function tryNext() {

100 if (rendered) {

101 return;

102 }

103

104 const container = getContainer();

105

106 if (container) {

107 // Verificar nuevamente si FastCommentsUI está disponible

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 // Obtener la URL actual como urlId

117 const newUrlId = window.location.pathname;

118

119 // Comprobar si necesitamos volver a renderizar (urlId cambió o es el primer renderizado)

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

121 currentUrlId = newUrlId;

122

123 // Destruir la instancia previa si existe

124 if (lastInstance) {

125 lastInstance.destroy();

126 // Limpiar el contenido del contenedor

127 container.innerHTML = '';

128 }

129

130 // Preparar la configuración

131 const config = {

132 tenantId: tenantId,

133 urlId: newUrlId

134 };

135

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

137

138 // Inicializar 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 // Monitorizar si el contenedor se elimina o la URL cambia

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 // Renderizado inicial cuando el DOM esté listo

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

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

177 } else {

178 render();

179 }

180

181 // Volver a renderizar al cambiar de ubicación (para SPAs)

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

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

184 render();

185 });

186 })();

187</script>

188

Pega eso en la ventana del editor que abrimos:

Pegar código

Ahora podemos hacer clic en Yes, Save en la esquina inferior derecha de esa ventana.

En la parte superior de la página, ahora haz clic en Save y luego en Preview.

¡Eso es todo! Ahora deberías tener comentarios en vivo añadidos a tu sitio de GoHighLevel.

Éxito

Si te has encontrado con un error de permiso denegado, o quieres personalizar FastComments, continúa leyendo.

FastComments está diseñado para personalizarse y adaptarse a su sitio.

Si desea añadir estilos personalizados o ajustar la configuración, Consulte nuestra Documentación de Personalización para aprender cómo.