Add Comments With MemberSpace

With FastComments, we can set up exclusive Members-only commenting when combined with MemberSpace.

We can also allow anonymous commenting if desired at the same time when a user is logged in, and can even set custom badges based on the user's membership!

The Code

We can easily connect FastComments with MemberSpace with a small code snippet:

FastComments MemberSpace Snippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        const tenantId = 'demo';
        const ALLOW_ANON = false;
        const LOGIN_URL = 'https://example.com/login';
        const PLAN_DISPLAY_LABELS = {
            'VIP Plan': 'VIP'
        };
        let lastInstance;
    
        function tick() {
            if (!window.MemberSpace) {
                return setTimeout(tick, 100);
            }
            if (!window.FastCommentsUI) {
                return setTimeout(tick, 100);
            }
            const target = document.getElementById('fastcomments-widget');
            if (!target) {
                return setTimeout(tick, 100);
            }
            const data = MemberSpace.getMemberInfo();
            if (data.isLoggedIn && data.memberInfo) {
                lastInstance = FastCommentsUI(target, {
                    tenantId: tenantId,
                    urlId: window.location.pathname,
                    simpleSSO: {
                        displayLabel: getDisplayLabel(data.memberInfo),
                        username: data.memberInfo.name,
                        email: data.memberInfo.email,
                        avatar: data.memberInfo.profileImageUrl
                    }
                });
            } else if (lastInstance) {
                lastInstance.destroy();
                lastInstance = FastCommentsUI(target, {
                    tenantId: tenantId,
                    urlId: window.location.pathname,
                    simpleSSO: getAnonSSOConfig()
                });
            }
        }
    
        function getAnonSSOConfig() {
            if (ALLOW_ANON) {
                return undefined;
            }
            return {
                loginURL: LOGIN_URL
            };
        }
        
        function getDisplayLabel(memberInfo) {
            if (!memberInfo.memberships) {
                return;
            }
            for (const membership of memberInfo.memberships) {
                const label = PLAN_DISPLAY_LABELS[membership.name];
                if (label) {
                    return label
                }
            }
        }
    
        tick();
    })();
</script>

When the user visits your site or application while logged in via MemberStack, they will automatically be logged into FastComments and their comments will be marked Verified.

Additionally, in the above example if you have a subscription plan called VIP Plan then we'll display a VIP badge next to the user's name. You can edit the example to add more plans. Reach out to support if you have questions.

Allow Anonymous Commenting

If you'd like to also have anonymous commenting, set ALLOW_ANON to true like this:

const ALLOW_ANON = true;

Also remember to change https://example.com/login to where you want users to go when they click the Login button:

This way users will have the option of entering their name and email to comment if they are not logged in to your member site.

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.

MemberSpace Installation

Add Comments With MemberSpace

The Code

Allow Anonymous Commenting

Domain Errors

Customization