Cusdis comment system

Hi, is there a way to integrate cusdis (https://cusdis.com/) into a writefreely single instance blog?

Hi! I’ve been trying to add cusdis comments to my writefreely blog, however, I haven’t had any success.

The code is as follows:

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="****"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

The main issue is that, after the comments box appears, it disappears almost instantly. From what I’ve read, this is because writefreely “sanitizes” the embedded JS code.

Another person was able to implement it using a trick posted on the forum.

This “trick” involves adding the JS code within the customization of the writefreely CSS code, which would look like this:

</style>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
<style>

Or something like that. In the tutorial mentioned above, the “addeventlistener” function is used to resolve the conflict. The issue is that I don’t know how to add it to the cusdis code. I would be very grateful if someone could help me with this.

Greetings!

Greetings!!

I’ve successfully added the cusdis comments using the following code. For a working example see: https://japanese.xdays.uk/

Add this in the “Custom CSS” box:

/* any custom css */
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const url = new URL(document.head.querySelector('link[rel="canonical"]').href);
  // only add to full article pages
  // replace the URL immediately below with your home / index page URL if you don't want the comments showing there
  if (url.href != "https://writefreely.example.com/") {
    const commentsDiv = document.getElementById("cusdis_thread");
    commentsDiv.setAttribute("data-host", "https://cusdis.com");
    commentsDiv.setAttribute("data-app-id", "[add-your-app-id-here]");
    commentsDiv.setAttribute("data-page-id", url.pathname);
    commentsDiv.setAttribute("data-page-url", url.href);
    commentsDiv.setAttribute("data-page-title", document.title);

    // this can be added as a separate script tag below this one
    // but I didn't want it on the home / index page
    // so adding it conditionally in this IF block instead 
    const script = document.createElement("script");
    script.setAttribute("src", "https://cusdis.com/js/cusdis.es.js");
    script.setAttribute("async", "");
    script.setAttribute("defer", "");
    document.body.appendChild(script);
  }
});
</script>

<style type="text/css">
<!-- closed by the code which injects this CSS -->

Add this in the “Post Signature” box:

<div id="cusdis_thread"></div>
1 Like

OMG, @infuerno you are awesome!!! thanks a lot for this, my blog is ready now!

Greetings!!! :heart:

1 Like