Add Live Discussions to Super.So Sites

Primero tenemos que abrir el editor de código. Si quieres añadir FastComments a todas las páginas, simplemente selecciona Código en la parte inferior izquierda:

Abrir configuración de código

Si quieres añadirlo a una página específica, selecciona Edit Custom Code en la configuración de esa página.

Ahora vamos a seleccionar la pestaña Body. ¡Esto es importante!. Instalar el fragmento de código en Head no funciona.

Seleccionar Body

Ahora ya estás listo para el paso 2.

En el siguiente paso necesitas copiar el código del widget predefinido que aparece a continuación.

Mientras hayas iniciado sesión en FastComments.com, el fragmento de código de abajo ya contendrá la información de tu cuenta. Vamos a copiarlo:

Código de Super.so FastComments Collab Chat

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7 let currentTopBar = null;

8

9 function load() {

10 if (!window.FastCommentsCollabChat) {

11 console.log('...no script, trying again...');

12 return setTimeout(load, 100);

13 }

14

15 const target = document.querySelector('.super-content');

16 if (!target || !target.innerHTML || target.innerHTML.length < 100) {

17 console.log('...no content, trying again...');

18 return setTimeout(load, 100);

19 }

20

21 // Limpiar la instancia existente

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Eliminar la barra superior existente si existe

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Crear nueva barra superior

32 const topBarTarget = document.createElement('div');

33 target.parentNode.insertBefore(topBarTarget, target);

34 topBarTarget.style.maxWidth = 'var(--layout-max-width)';

35 topBarTarget.style.margin = '0 auto';

36 currentTopBar = topBarTarget;

37 currentWidget = target;

38

39 // Inicializar FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Actualizar el pathname actual

46 currentPathname = window.location.pathname;

47 }

48

49 // Carga inicial

50 load();

51

52 // Comprobar cambios cada 500 ms

53 setInterval(() => {

54 // Recargar si cambió el pathname

55 if (window.location.pathname !== currentPathname) {

56 console.log('Pathname changed, reloading...');

57 load();

58 return;

59 }

60

61 // Recargar si se eliminó el widget

62 if (currentWidget && !currentWidget.parentNode) {

63 console.log('Widget removed, reloading...');

64 load();

65 return;

66 }

67

68 // Recargar si el contenedor quedó vacío

69 const target = document.querySelector('.super-content');

70 if (target && target.innerHTML.length < 100) {

71 console.log('Container emptied, reloading...');

72 load();

73 }

74 }, 500);

75 })();

76</script>

77

Now paste in the Body area:

Código pegado

If you see a "this is a demo message" after pasting the code:

• Asegúrate de haber iniciado sesión en tu cuenta de fastcomments.com.
• Asegúrate de tener habilitadas las cookies de terceros.
• Luego actualiza esta página y copia el fragmento de código de nuevo. Debería tener tenantId rellenado con el identificador de tu tenant.

Añadiendo un Widget de Comentarios en Vivo a tus artículos de Notion en Super.so

Además de Collab Chat, puedes añadir un widget de comentarios tradicional al final de tus artículos de Notion. Esto permite que los lectores dejen comentarios y mantengan discusiones sobre todo el artículo.

Pasos de instalación

Copia el siguiente código y pégalo en la sección Body de los ajustes de tu sitio en Super.so:

Widget de Comentarios en Vivo de FastComments para Super.so

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7

8 function load() {

9 if (!window.FastCommentsUI) {

10 console.log('...no script, trying again...');

11 return setTimeout(load, 100);

12 }

13

14 const contentArea = document.querySelector('.notion-root');

15 if (!contentArea || !contentArea.innerHTML || contentArea.innerHTML.length < 100) {

16 console.log('...no content, trying again...');

17 return setTimeout(load, 100);

18 }

19

20 // Limpiar instancia existente

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Crear nuevo elemento objetivo

26 const target = document.createElement('div');

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Inicializar FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Actualizar la ruta actual

37 currentPathname = window.location.pathname;

38 }

39

40 // Carga inicial

41 load();

42

43 // Comprobar cambios cada 500 ms

44 setInterval(() => {

45 // Volver a cargar si la ruta cambió

46 if (window.location.pathname !== currentPathname) {

47 console.log('Pathname changed, reloading...');

48 load();

49 return;

50 }

51

52 // Volver a cargar si el widget fue eliminado

53 if (currentWidget && !currentWidget.parentNode) {

54 console.log('Widget removed, reloading...');

55 load();

56 return;

57 }

58

59 // Volver a cargar si el contenedor se vació

60 const contentArea = document.querySelector('.notion-root');

61 if (contentArea && contentArea.innerHTML.length < 100) {

62 console.log('Container emptied, reloading...');

63 load();

64 }

65 }, 500);

66 })();

67</script>

68

Notas importantes

• El widget de comentarios aparecerá al final de tus artículos de Notion
• Cada página obtiene su propio hilo de comentarios único basado en la ruta de la URL
• Asegúrate de reemplazar "demo" con tu ID de tenant real de tu cuenta de FastComments
• El widget gestiona automáticamente la carga dinámica de páginas de Super.so

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

Si desea agregar estilos personalizados, o ajustar la configuración, Consulte nuestra documentación de personalización para saber cómo.