FastComments.com

Add Live Discussions to Super.So Sites

FastComments Collab Chat brings Super.so sites to the next level by adding live inline discussions. Users can highlight and comment on pieces of text collaboratively, together - live!

Here we'll cover the installation steps which should only take a few minutes.

Step 1: Open Settings Internal Link

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
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
Select Body

Now you're ready for step 2.

Step 2: Add Pre-Made Code Internal Link

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

See Also: Regular Comment Widget Internal Link

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

Customization Internal Link

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.