Add Live Discussions to Super.So Sites

Først skal vi åbne kodeeditoren. Hvis du vil tilføje FastComments til alle sider, skal du blot vælge Kode nederst til venstre:

Åbn kodeindstillinger

Hvis du vil tilføje det til en bestemt side, skal du vælge Edit Custom Code i den sides indstillinger.

Nu vælger vi fanen Body. Dette er vigtigt!. Installation af kode-snutten i Head virker ikke.

Vælg Body

Nu er du klar til trin 2.

I dette næste trin skal du kopiere den forudlavede widget-kode nedenfor.

Så længe du er logget ind på FastComments.com, vil kodeudsnittet nedenfor allerede indeholde dine kontooplysninger. Lad os kopiere det:

Super.so FastComments Collab Chat-kode

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 // Ryd op i eksisterende instans

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Ryd op i eksisterende topbar, hvis den findes

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Opret ny topbar

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 // Opdater nuværende sti

46 currentPathname = window.location.pathname;

47 }

48

49 // Initial indlæsning

50 load();

51

52 // Tjek for ændringer hvert 500 ms

53 setInterval(() => {

54 // Genindlæs hvis sti ændret

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

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

57 load();

58 return;

59 }

60

61 // Genindlæs hvis widget blev fjernet

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

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

64 load();

65 return;

66 }

67

68 // Genindlæs hvis container blev tømt

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

Nu indsæt i Body-området:

Indsat kode

Hvis du ser en "dette er en demo-meddelelse" efter indsættelse af koden:

• Sørg for, at du er logget ind på din fastcomments.com-konto.
• Sørg for, at tredjeparts-cookies er aktiveret.
• Opdater derefter denne side og kopier kodeudsnittet igen. Det burde have tenantId udfyldt med din tenant-identifikator.

Tilføjelse af en Live-kommentar-widget til dine Super.so Notion-artikler

Ud over Collab Chat kan du tilføje en traditionel kommentar-widget i bunden af dine Notion-artikler. Dette giver læsere mulighed for at efterlade kommentarer og føre diskussioner om hele artiklen.

Installationstrin

Kopiér følgende kode og indsæt den i Body-sektionen i dine Super.so siteindstillinger:

Super.so FastComments Live-kommentar-widget

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 // Ryd op i eksisterende instans

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Opret nyt mål

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 // Opdater nuværende pathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Første indlæsning

41 load();

42

43 // Tjek hver 500 ms for ændringer

44 setInterval(() => {

45 // Genindlæs hvis pathname ændret

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

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

48 load();

49 return;

50 }

51

52 // Genindlæs hvis widget blev fjernet

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

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

55 load();

56 return;

57 }

58

59 // Genindlæs hvis container blev tømt

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

Vigtige bemærkninger

• Kommentar-widget'en vises i bunden af dine Notion-artikler
• Hver side får sin egen unikke kommentartråd baseret på URL-stien
• Sørg for at erstatte "demo" med dit faktiske tenant ID fra din FastComments-konto
• Widget'en håndterer automatisk Super.so's dynamiske sideindlæsning

FastComments er designet til at kunne tilpasses, så det matcher din hjemmeside.

Hvis du vil tilføje brugerdefineret styling eller justere konfigurationen, se vores dokumentation om tilpasning for at lære hvordan.