Add Live Discussions to Super.So Sites

First we need to open the code editor. If you want to add FastComments to all pages, just select Code in the bottom left:

Open Code Settings

If you want to add it to a specific page, then select Edit Custom Code in that page's settings.

Now let's select the Body tab. This is important!. Installing the code snippet in Head does not work.

Select Body

Now you're ready for step 2.

In this next step you need to copy the pre-made widget code below.

As long as you're logged into FastComments.com the below code snippet will already have your account information. Let's copy it:

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

Now paste in the Body area:

Pasted Code

If you see a "this is a demo message" after pasting the code:

• Ensure you're logged into your fastcomments.com account.
• Ensure you have 3rd party cookies enabled.
• Then refresh this page and copy the code snippet again. It should have tenantId populated with your tenant's identifier.

Adding a Live Comment Widget to Your Super.so Notion Articles

In addition to Collab Chat, you can add a traditional comment widget to the bottom of your Notion articles. This allows readers to leave comments and have discussions about the entire article.

Installation Steps

Copy the following code and paste it in the Body section of your Super.so site settings:

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 // Clean up existing instance

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Create new target

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

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Initialize FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Update current pathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Initial load

41 load();

42

43 // Check every 500ms for changes

44 setInterval(() => {

45 // Reload if pathname changed

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

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

48 load();

49 return;

50 }

51

52 // Reload if widget was removed

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

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

55 load();

56 return;

57 }

58

59 // Reload if container was emptied

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

Important Notes

• The comment widget will appear at the bottom of your Notion articles
• Each page gets its own unique comment thread based on the URL path
• Make sure to replace "demo" with your actual tenant ID from your FastComments account
• The widget automatically handles Super.so's dynamic page loading

FastComments is designed to be customized to match your site.

If you'd like to add custom styling, or tweak configuration, Checkout our Customization Documentation to learn how.