Add Live Discussions to Super.So Sites

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

Ouvrir les paramètres du code

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

Maintenant, sélectionnons l'onglet Body. Ceci est important !. L'installation du fragment de code dans Head ne fonctionne pas.

Sélectionnez Body

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

Dans cette é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 // 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

Collez maintenant dans la zone Body :

Code collé

Si vous voyez un "this is a demo message" 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 le fragment de code. Il devrait avoir le tenantId renseigné 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 au 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 :

Widget de commentaires en direct FastComments pour 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 // 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 currentPathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Chargement initial

41 load();

42

43 // Vérifier tous les 500 ms pour des changements

44 setInterval(() => {

45 // Recharger si 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

Notes importantes

• Le widget de commentaires apparaîtra au bas de vos articles Notion
• Chaque page obtient son propre fil de commentaires unique basé sur le chemin de l'URL
• Assurez-vous de remplacer "demo" par votre ID de locataire réel provenant de 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 des styles personnalisés ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment faire.