Mon Oct 26 2020 -
...

Using FastComments in VanillaJS Single Page Applications

! This Article Contains Technical Jargon

Target Audience

This article is targeted toward developers.

Introduction

Most example usage of the FastComments VanillaJS widget is a very simple code snippet that loads the comment thread for the current page URL. This is because this is the use case for the overwhelming majority of our customers, but recently we have seen an influx of developers building SPAs and using FastComments.

First, keep in mind FastComments has dedicated React and Vue components, so check those out if you are using those libraries so you don't have to build your own wrapper around FastComments.

If you're building your application using VanillaJS however, you can instantiate and update the comment widget dynamically.

First, the URL and URL ID

FastComments has two identifiers for the page or article the comment thread is tied to. In the configuration object, they are the "url" and "urlId" properties.

The URL is the URL to the comment widget. Ideally, you should be able to visit this URL from outside your application. It will be exposed as a link in notification emails and in administrator tools.

The URL ID is string that is either a URL or an ID - it can be any value as long as it represents the current page. If you have a post, article, or page id, you may use that instead of the page URL for this value. The reason that URL ID is separate is that you may want to store extra information in the URL that would make the URL not unique to the page.

Note that we've documented the complete configuration the widget supports in TypeScript on GitHub.

Specifics and a Real Demo

When the widget is instantiated, capture the result from the FastCommentsUI function that you would normally call:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);

Then, you can invoke an "update" method on the instance object to update the configuration. This will refresh the component:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config); widgetInstance.update({ ...config, urlId: getUrlId(), url: getUrl() });

You can see a working example with this fiddle.

Note that in this example we use document.getElementById, but you can use whatever mechanism you like to fetch the target element.

Gotchas

While just updating "urlId" will work, you should update both "urlId" and "url" even if they are the same so that links from notification emails and the moderation tools work. Just updating the "url" will not work - comments are tied to "urlId".

In Conclusion

We hope you've found this guide helpful. Feel free to comment below with any questions.

Cheers!

Mon Oct 26 2020 - ...