Live-Diskussionen zu Super.so-Seiten hinzufügen

Zuerst müssen wir den Code-Editor öffnen. Wenn Sie FastComments zu allen Seiten hinzufügen möchten, wählen Sie einfach unten links Code aus:

Code-Einstellungen öffnen

Wenn Sie es zu einer bestimmten Seite hinzufügen möchten, wählen Sie in den Einstellungen dieser Seite Edit Custom Code aus.

Wählen Sie nun die Registerkarte Body. Das ist wichtig!. Die Installation des Code-Snippets im Head funktioniert nicht.

Body auswählen

Jetzt sind Sie bereit für Schritt 2.

In diesem nächsten Schritt musst du den unten vorbereiteten Widget-Code kopieren.

Solange du bei FastComments.com eingeloggt bist, enthält der folgende Code-Schnipsel bereits deine Kontoinformationen. Kopieren wir ihn:

Super.so FastComments Collab Chat Code

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 // Bestehende Instanz aufräumen

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Bestehende Top-Bar aufräumen, falls vorhanden

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Neue Top-Bar erstellen

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

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Aktuellen Pfad aktualisieren

46 currentPathname = window.location.pathname;

47 }

48

49 // Erstes Laden

50 load();

51

52 // Alle 500ms auf Änderungen prüfen

53 setInterval(() => {

54 // Neu laden, wenn sich der Pfad geändert hat

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

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

57 load();

58 return;

59 }

60

61 // Neu laden, wenn das Widget entfernt wurde

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

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

64 load();

65 return;

66 }

67

68 // Neu laden, wenn der Container geleert wurde

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

Füge nun den Code in den Bereich Body ein:

Eingefügter Code

Wenn du nach dem Einfügen des Codes eine „this is a demo message"-Meldung siehst:

• Stelle sicher, dass du in deinem fastcomments.com-Konto eingeloggt bist.
• Stelle sicher, dass Cookies von Drittanbietern aktiviert sind.
• Lade dann diese Seite neu und kopiere den Code-Schnipsel erneut. Er sollte mit der Kennung deines Tenants als tenantId gefüllt sein.

Hinzufügen eines Live-Kommentar-Widgets zu Ihren Super.so Notion-Artikeln

Zusätzlich zum Collab Chat können Sie am Ende Ihrer Notion-Artikel ein klassisches Kommentar-Widget hinzufügen. Dadurch können Leser Kommentare hinterlassen und Diskussionen über den gesamten Artikel führen.

Installationsschritte

Kopieren Sie den folgenden Code und fügen Sie ihn in den Body-Abschnitt Ihrer Super.so-Site-Einstellungen ein:

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 // Vorhandene Instanz bereinigen

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Neues Ziel erstellen

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // FastComments initialisieren

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Aktuellen Pfadnamen aktualisieren

37 currentPathname = window.location.pathname;

38 }

39

40 // Initiales Laden

41 load();

42

43 // Alle 500 ms auf Änderungen prüfen

44 setInterval(() => {

45 // Neu laden, wenn sich der Pfadname geändert hat

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

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

48 load();

49 return;

50 }

51

52 // Neu laden, wenn das Widget entfernt wurde

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

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

55 load();

56 return;

57 }

58

59 // Neu laden, wenn der Container geleert wurde

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

Wichtige Hinweise

• Das Kommentar-Widget wird am Ende Ihrer Notion-Artikel angezeigt
• Jede Seite erhält einen eigenen, eindeutigen Kommentar-Thread basierend auf dem URL-Pfad
• Stellen Sie sicher, dass Sie "demo" durch Ihre tatsächliche Tenant-ID aus Ihrem FastComments-Konto ersetzen
• Das Widget verarbeitet automatisch das dynamische Laden von Seiten bei Super.so

FastComments wurde so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Styles hinzufügen oder die Konfiguration anpassen möchten, Sehen Sie sich unsere Anpassungsdokumentation an, um zu erfahren, wie.