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

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.

Step 2: Add Pre-Made Code

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

<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
<script>
    (function () {
        function load() {
            if (!window.FastCommentsCollabChat) {
                console.log('...no script, trying again...');
                return setTimeout(load, 100);
            }
            const target = document.querySelector('.super-content');
            if (!target) {
                console.log('...no content, trying again...');
                return setTimeout(load, 100);
            }
            if (target.fastCommentsInstance) {
                target.fastCommentsInstance.destroy();
            }
            const topBarTarget = document.createElement('div');
            target.parentNode.insertBefore(topBarTarget, target);
            topBarTarget.style.maxWidth = 'var(--layout-max-width)';
            topBarTarget.style.margin = '0 auto';
            target.fastCommentsInstance = FastCommentsCollabChat(target, {
                tenantId: "demo",
                topBarTarget: topBarTarget
            });
        }
        load();
    })();
</script>

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.

Success

Success! You should now see the FastComments installed.

This is how it should look - you should be able to select some text to discuss it. If not, or you'd like to change how it looks, please reach out to support.

Starting a Discussion

Congratulations on setting up FastComments with Super! If you've run into a Domain Error, or would like to learn how to customize the comment area, read on!

Domain Errors

You may get an authorization error, like the following:

Domain Configuration Missing

This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.

In this case, the fix is simple. You just have to add your site to your FastComments.com account.

Go here to add your site to your account.

Customization

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.