Add Live Discussions to Super.So Sites

Tout d'abord, nous devons ouvrir l'éditeur de code. Si vous souhaitez ajouter FastComments à toutes les pages, sélectionnez simplement Code en bas à gauche :

Ouvrir les paramètres du code

Si vous souhaitez l'ajouter à une page spécifique, sélectionnez alors Edit Custom Code dans les paramètres de cette page.

Sélectionnons maintenant l'onglet Body. C'est important !. L'installation du snippet de code dans Head ne fonctionne pas.

Sélectionner l'onglet Body

Vous êtes maintenant prêt pour l'étape 2.

Dans l'étape suivante, vous devez copier le code du widget préfabriqué ci-dessous.

Tant que vous êtes connecté à FastComments.com, l'extrait de code ci-dessous contiendra déjà les informations de votre compte. Copions-le :

Code 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 // Nettoyer l'instance existante

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Supprimer la barre supérieure existante si elle existe

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Créer une nouvelle barre supérieure

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

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Mettre à jour le pathname actuel

46 currentPathname = window.location.pathname;

47 }

48

49 // Chargement initial

50 load();

51

52 // Vérifier les changements toutes les 500 ms

53 setInterval(() => {

54 // Recharger si le pathname a changé

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

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

57 load();

58 return;

59 }

60

61 // Recharger si le widget a été supprimé

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

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

64 load();

65 return;

66 }

67

68 // Recharger si le conteneur a été vidé

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

Collez maintenant dans la zone Body :

Code collé

Si vous voyez un "ceci est un message de démonstration" après avoir collé le code :

• Assurez-vous d'être connecté à votre compte fastcomments.com.
• Assurez-vous que les cookies tiers sont activés.
• Ensuite, actualisez cette page et copiez à nouveau l'extrait de code. Il devrait avoir tenantId rempli avec l'identifiant de votre tenant.

Ajouter un widget de commentaires en direct à vos articles Notion sur Super.so

En plus de Collab Chat, vous pouvez ajouter un widget de commentaires traditionnel en bas de vos articles Notion. Cela permet aux lecteurs de laisser des commentaires et de discuter de l'article dans son ensemble.

Étapes d'installation

Copiez le code suivant et collez-le dans la section Body des paramètres de votre site Super.so :

Super.so FastComments Widget de commentaires en direct

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 // Nettoyer l'instance existante

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Créer une nouvelle cible

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Initialiser FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Mettre à jour le pathname courant

37 currentPathname = window.location.pathname;

38 }

39

40 // Chargement initial

41 load();

42

43 // Vérifier toutes les 500 ms s'il y a des changements

44 setInterval(() => {

45 // Recharger si le pathname a changé

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

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

48 load();

49 return;

50 }

51

52 // Recharger si le widget a été supprimé

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

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

55 load();

56 return;

57 }

58

59 // Recharger si le conteneur a été vidé

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

Remarques importantes

• Le widget de commentaires apparaîtra en bas de vos articles Notion
• Chaque page obtient son propre fil de commentaires unique en fonction du chemin de l'URL
• Assurez-vous de remplacer "demo" par votre ID de locataire réel depuis votre compte FastComments
• Le widget gère automatiquement le chargement dynamique des pages de Super.so

FastComments est conçu pour être personnalisé afin de correspondre à votre site.

Si vous souhaitez ajouter un style personnalisé, ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.