Add Live Discussions to Super.So Sites

Primeiro precisamos abrir o editor de código. Se você quiser adicionar o FastComments a todas as páginas, basta selecionar Code no canto inferior esquerdo:

Abrir Configurações de Código

Se você quiser adicioná-lo a uma página específica, selecione Edit Custom Code nas configurações dessa página.

Agora vamos selecionar a aba Body. Isto é importante!. Instalar o snippet de código no Head não funciona.

Selecionar Body

Agora você está pronto para o passo 2.

No próximo passo você precisa copiar o código do widget pré-criado abaixo.

Contanto que você esteja logado em FastComments.com o trecho de código abaixo já terá as informações da sua conta. Vamos copiá-lo:

Código do 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 // Limpar instância existente

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Remover top bar existente, se houver

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Criar nova 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 // Inicializar FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Atualizar pathname atual

46 currentPathname = window.location.pathname;

47 }

48

49 // Carregamento inicial

50 load();

51

52 // Verificar mudanças a cada 500ms

53 setInterval(() => {

54 // Recarregar se o pathname mudou

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

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

57 load();

58 return;

59 }

60

61 // Recarregar se o widget foi removido

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

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

64 load();

65 return;

66 }

67

68 // Recarregar se o container foi esvaziado

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

Agora cole na área Body:

Código colado

Se você vir a mensagem "esta é uma mensagem de demonstração" após colar o código:

• Certifique-se de que você está logado na sua conta em fastcomments.com.
• Certifique-se de que cookies de terceiros estejam habilitados.
• Em seguida, atualize esta página e copie o trecho de código novamente. Ele deverá ter tenantId preenchido com o identificador do seu tenant.

Adicionando um widget de comentários ao vivo aos seus artigos do Notion no Super.so

Além do Collab Chat, você pode adicionar um widget de comentários tradicional ao final dos seus artigos do Notion. Isso permite que os leitores deixem comentários e conversem sobre o artigo inteiro.

Etapas de instalação

Copie o código a seguir e cole-o na seção Body nas configurações do seu site no Super.so:

Widget de Comentários ao Vivo do 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 // Limpar instância existente

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Criar novo alvo

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Inicializar o FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Atualizar pathname atual

37 currentPathname = window.location.pathname;

38 }

39

40 // Carregamento inicial

41 load();

42

43 // Verificar alterações a cada 500ms

44 setInterval(() => {

45 // Recarregar se o pathname mudou

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

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

48 load();

49 return;

50 }

51

52 // Recarregar se o widget foi removido

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

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

55 load();

56 return;

57 }

58

59 // Recarregar se o container foi esvaziado

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

Observações importantes

• O widget de comentários aparecerá na parte inferior dos seus artigos do Notion
• Cada página obtém seu próprio tópico de comentários exclusivo com base no caminho da URL
• Certifique-se de substituir "demo" pelo seu tenant ID real da sua conta FastComments
• O widget lida automaticamente com o carregamento dinâmico de páginas do Super.so

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 Customização para saber como.