Add Live Discussions to Super.So Sites

Eerst moeten we de code-editor openen. Als je FastComments aan alle pagina's wilt toevoegen, selecteer dan gewoon Code linksonder:

Open code-instellingen

Als je het aan een specifieke pagina wilt toevoegen, selecteer dan Edit Custom Code in de instellingen van die pagina.

Selecteer nu het tabblad Body. Dit is belangrijk! Het installeren van het codefragment in Head werkt niet.

Selecteer Body

Nu ben je klaar voor stap 2.

In de volgende stap moet je de hieronder vooraf gemaakte widgetcode kopiëren.

Zolang je ingelogd bent op FastComments.com bevat het onderstaande codefragment al je accountgegevens. Laten we het kopiëren:

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 // 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

Plak het nu in het Body-gebied:

Geplakte code

Als je na het plakken van de code een "this is a demo message" ziet:

• Zorg dat je bent ingelogd op je fastcomments.com-account.
• Zorg dat je cookies van derden hebt ingeschakeld.
• Vernieuw vervolgens deze pagina en kopieer het codefragment opnieuw. Het zou tenantId gevuld moeten hebben met de identificatie van je tenant.

Een Live Comment-widget toevoegen aan uw Super.so Notion-artikelen

In aanvulling op Collab Chat kunt u een traditionele commentaarwidget toevoegen aan de onderkant van uw Notion-artikelen. Dit stelt lezers in staat om opmerkingen achter te laten en discussies te voeren over het hele artikel.

Installatiestappen

Kopieer de volgende code en plak deze in de Body-sectie van uw Super.so site-instellingen:

Super.so FastComments Live Comment-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 // Bestaande instantie opruimen

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Nieuwe target maken

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // FastComments initialiseren

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Huidige pathname bijwerken

37 currentPathname = window.location.pathname;

38 }

39

40 // Initiële laadactie

41 load();

42

43 // Elke 500ms controleren op wijzigingen

44 setInterval(() => {

45 // Opnieuw laden als pathname is veranderd

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

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

48 load();

49 return;

50 }

51

52 // Opnieuw laden als widget is verwijderd

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

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

55 load();

56 return;

57 }

58

59 // Opnieuw laden als container geleegd is

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

Belangrijke opmerkingen

• De commentaarwidget verschijnt onderaan uw Notion-artikelen
• Elke pagina krijgt een eigen unieke discussiedraad op basis van het URL-pad
• Zorg ervoor dat u "demo" vervangt door uw echte tenant-ID uit uw FastComments-account
• De widget handelt automatisch de dynamische paginalading van Super.so af

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.