Añade discusiones en vivo a los sitios de Super.so

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 debes copiar el código del widget predefinido que aparece abajo.

Mientras estés conectado a FastComments.com, el fragmento de código de abajo ya tendrá la información de tu cuenta. Copiémoslo:

Código de FastComments Collab Chat para Super.so

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 // Clean up existing instance

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Clean up existing top bar if it exists

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Create new top bar

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 // Initialize FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Update current pathname

46 currentPathname = window.location.pathname;

47 }

48

49 // Initial load

50 load();

51

52 // Check every 500ms for changes

53 setInterval(() => {

54 // Reload if pathname changed

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

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

57 load();

58 return;

59 }

60

61 // Reload if widget was removed

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

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

64 load();

65 return;

66 }

67

68 // Reload if container was emptied

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

Ahora pega en el área Body:

Código pegado

Si ves un "este es un mensaje de demostración" después de pegar el código:

• Asegúrate de estar conectado a tu cuenta de fastcomments.com.
• Asegúrate de tener las cookies de terceros habilitadas.
• Luego actualiza esta página y copia el fragmento de código de nuevo. Debería tener tenantId completado 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.