Aggiungi discussioni live ai siti Super.so

Per prima cosa dobbiamo aprire l'editor di codice. Se vuoi aggiungere FastComments a tutte le pagine, seleziona semplicemente Code in basso a sinistra:

Apri le impostazioni del codice

Se invece vuoi aggiungerlo a una pagina specifica, seleziona Edit Custom Code nelle impostazioni di quella pagina.

Ora selezioniamo la scheda Body. Questo è importante! Installare lo snippet di codice in Head non funziona.

Seleziona Body

Ora sei pronto per il passaggio 2.

In questo passaggio successivo devi copiare il codice del widget predefinito riportato di seguito.

Finché sei connesso a FastComments.com, lo snippet di codice sottostante conterrà già le informazioni del tuo account. Copiamolo:

Codice FastComments Collab Chat per 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

Ora incolla nell'area Body:

Codice incollato

Se dopo aver incollato il codice vedi un messaggio "this is a demo message":

• Assicurati di essere connesso al tuo account fastcomments.com.
• Assicurati di avere i cookie di terze parti abilitati.
• Quindi aggiorna questa pagina e copia di nuovo lo snippet di codice. Dovrebbe avere il tenantId popolato con l'identificatore del tuo tenant.

Aggiungere un widget di commenti live ai tuoi articoli Notion su Super.so

Oltre a Collab Chat, puoi aggiungere un widget di commenti tradizionale alla parte inferiore dei tuoi articoli Notion. Questo permette ai lettori di lasciare commenti e discutere dell'intero articolo.

Passaggi di installazione

Copia il seguente codice e incollalo nella sezione Body delle impostazioni del tuo sito Super.so:

Widget di commenti live FastComments per 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 // Pulire l'istanza esistente

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Crea nuovo target

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Inizializza FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Aggiorna pathname corrente

37 currentPathname = window.location.pathname;

38 }

39

40 // Caricamento iniziale

41 load();

42

43 // Controlla ogni 500ms per modifiche

44 setInterval(() => {

45 // Ricarica se il pathname è cambiato

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

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

48 load();

49 return;

50 }

51

52 // Ricarica se il widget è stato rimosso

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

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

55 load();

56 return;

57 }

58

59 // Ricarica se il contenitore è stato svuotato

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

Note importanti

• Il widget dei commenti apparirà in fondo ai tuoi articoli Notion
• Ogni pagina avrà il proprio thread di commenti univoco basato sul percorso URL
• Assicurati di sostituire "demo" con il tuo tenant ID reale del tuo account FastComments
• Il widget gestisce automaticamente il caricamento dinamico delle pagine di Super.so

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.