Adding A Comment System To My Blog

Adding A Comment System To My Blog
4 min read Tue Mar 22 2022

Whiles browsing the internet, I found an interesting website, Cusdis

What is Cusdis?

Cusdis is a new lightweight, privacy first, open sourced comment system. It’s a perfect alternative for Disqus users who want to retain their privacy, also, it’s very lightweight (~5KB gzipped).

Installing Cusdis is very easy and it’s user interface is simple. Users do not need to sign up before they can comment on your website which is very great for me because I do not want users to take “hours” to create an account to just write a single comment.

Since Cusdis is very new, there are a few pros and cons which I would like to outline.

Pros

  • Cusdis is open sourced. This means if you are a developer, you can read the source code and make sure they are not tracking your data.
  • It is self-hostable.
    Incase you want to host your data on your own server, Cusdis allows you to do just that.
  • It doesn’t require the commenter to sign in.
  • It doesn’t also use cookies.

Cons

  • You have to manually moderate comments.
    Unlike other comment systems, you have to manually moderate your comments in Cusdis. This means that comments are not displayed by default until you approve it
  • Comment widget is not customizable.
    This means, you can’t use your own colors and fonts within the widget.

Installing Cusdis on your Svelte Website

As I said earlier on, installing Cusdis is very easy. Just head over to their website and create an account. After that, you will be redirected to your dashboard which will allow you to add a new website. After adding the website, you will be given an embed code which you will place wherever in your page where you want your comment widget to appear.

On this site, my blog posts page is on src/routes/blog/[slug]/index.svelte and this is how I inserted Cusdis into my website.

<article>
	<div>
	  <!-- article content -->
	</div>
	<div id="cusdis_thread"
		data-host="https://cusdis.com"
		data-app-id="{appid}"
		data-page-id="{metadata.slug}"
		data-page-url="{$page.url.pathname}"
		data-page-title="{metadata.title}"
		data-theme="{$theme}"
	  ></div>
	  <svelte:head>
	     <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
	  </svelte:head>
</article>

This is how I display Cusdis on my website. I provide variables for all the data Cusdis will need to render the comment system.

The data-host refers to the domain on which the data is loaded from. You will set it to your own domain if you self-host Cusdis. The data-app-id is a unique ID which is generated by Cusdis for you. You will find it in your project page on your dashboard. The data-page-id is a unique keyword which is used to identify the page, a perfect fit would be your blog’s page slug. The data-page-url is the current’s page URL. The data-page-title refers to the title of the current page. data-theme also refers to the theme of the widget system, it could be dark, light or auto but if a value is not provided, it defaults to light.

Conclusion

So this is a small write-up about how I added Cusdis comment system to my website, after reading this blog post, please make sure to write down something in the comments section. 😉
Don’t spam💂‍♂️

Happy Coding 😄