Disqus is a comment system that enables discussion on websites and connects conversations across the web. Blog post comments have been ingrained in our web experiences.

In staying true to our serverless ecosystem, Disqus provides all the moving parts and more without needing to spin up a server you might have to manage. They have done all the hard work and will continue to iterate and improve the product providing, as they bill themselves, “The #1 way to build an audience on your website”.

We will be adding Disqus to the blog posts in the Scrivito Example App. You will need a running Example App and an account with Disqus. When you sign up, you will need your website “shortname” from the Disqus settings.

We are going to use an npm package to help keep things clean and integration fast. npm disqus-react is a React component for embedding Disqus which we will use within Scrivito’s BlogPost component in the Example App. To install the library to your project, execute:

Next, we update the BlogPost component from the Scrivito Example App. We will import the disqus-react library, define the information Disqus needs as constants and include the Disqus component in a <div> container.

The important parts here are the disqusShortname and disqusConfig constants. The disqusConfig gets the URL for the page from Scrivito’s urlFor helper. The disqusConfig needs a unique identifier, which is just what the object id Scrivito creates for the page is, so we can use that. Finally, the title can be set using the BlogPost's title attribute.

An alternative, here, would be to make the “shortname” an environment variable or a website setting as we did in our Snipcart tutorial. You could also create a completely separate Disqus component – you decide what works for you.

Lastly, you will need to add “https://jcdemo.disqus.com/embed” to the script-src in the Content Security Policy at “public/_headersCsp.json”.

That’s all, folks!

We hope you enjoy building your community! Remember, there are many options and settings available in your Disqus account.