Blog - Kais BETTAIEB

#cusdis #comments #writefreely #javascript

WriteFreely is beloved for its minimalism. However, fostering a community often requires a feedback loop. The challenge is adding comments without shattering that clean, distraction-free aesthetic.

I recently integrated Cusdis—a lightweight, open-source, and privacy-friendly comment system—into this blog. It aligns seamlessly with WriteFreely’s ethos: it requires no user tracking and adapts beautifully with a bit of custom CSS.

Here is how to implement a fully dynamic, styled comment section. This script ensures the widget loads only on individual posts (keeping your homepage pristine) and automatically respects dark mode.

Step 1: Get Your Cusdis ID

First, you need a running Cusdis instance. You have two paths:

• Cloud: Create a free account at Cusdis.com.
• Self-Hosted: Host it yourself on a VPS (using Coolify or Docker) for 100% data ownership.

Once you have access to your dashboard, copy your App ID (e.g., f42fd160-a4f2-...). You will need this for the JavaScript configuration below.

Step 2: The Logic (Why Custom JS?)

Since WriteFreely lacks native support for editing individual post templates, we cannot simply paste the standard Cusdis embed code. A static embed cannot automatically fetch the unique Page ID or Title for every article.

Instead, we use Custom JavaScript to:

1. Verify context: Check if the user is viewing a single post (ignoring the homepage).
2. Build the UI: Dynamically append a “Comments” container to the bottom of the article.
3. Inject the Widget: Initialize Cusdis with the correct metadata (ID, URL, Title).
4. Style: Force the widget into “Dark Mode” to match the theme.

Step 3: The JavaScript Code

Navigate to your WriteFreely dashboard, go to Customize > Custom JavaScript, and paste the code below.

Note: Be sure to replace 'YOUR-APP-ID-HERE' with the actual ID you copied in Step 1.

(function() {
    // Only run this script if we are on a post page (body#post)
    // This prevents the comments from loading on the homepage or collections.
    var postBody = document.querySelector('body#post');
    
    if (postBody) {
        // 1. Create the container div for Cusdis
        var cusdisContainer = document.createElement('div');
        cusdisContainer.id = 'cusdis_thread';
        cusdisContainer.dataset.host = '[https://cusdis.com](https://cusdis.com)';
        cusdisContainer.dataset.appId = 'YOUR-APP-ID-HERE'; // PASTE YOUR ID HERE
        cusdisContainer.dataset.pageId = window.location.pathname;
        cusdisContainer.dataset.pageUrl = window.location.href;
        cusdisContainer.dataset.pageTitle = document.title;
        cusdisContainer.dataset.theme = 'dark'; // Forces dark mode

        // 2. Append the container to the article or main content area
        // Note: 'article' is standard in most WriteFreely themes. 
        var article = document.querySelector('article');
        if (article) {
            article.appendChild(cusdisContainer);
        }

        // 3. Load the Cusdis SDK asynchronously
        var script = document.createElement('script');
        script.src = '[https://cusdis.com/js/cusdis.es.js](https://cusdis.com/js/cusdis.es.js)';
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
    }
})();

Step 4: The styling

Now that the functionality is in place, let's style the container to look like a piece of retro-futuristic hardware. We want a monospace font, a “console” border, and a distinct separation from the rest of your content.

Navigate to Customize > Custom CSS and add the following:

/* --- VISIBILITY RULES of COMMENT SECTION --- */
body#collection #comment-section,
body#subpage #comment-section {
    display: none !important;
}

body#post #comment-section {
    display: block !important;
}

/* --- END VISIBILITY RULES OF COMMENT SECTION -- */
/* --- CUSDIS COMMENT SECTION FIXES --- */
#comment-section {
    margin-top: 3rem; /* space from article content */
    width: 100%;
    max-width: 100%;
}

/* Cusdis iframe container */
#cusdis_thread {
    width: 100% !important;
    min-height: 500px; /* initial height */
    border-radius: 8px;
    overflow: hidden; /* remove inner scrollbars */
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Make the iframe responsive */
#cusdis_thread iframe {
    width: 100% !important;
    min-height: 500px !important;
    height: auto !important;
    border: none !important;
}

/* Dark theme for Cusdis content */
#cusdis_thread {
    --cusdis-background: var(--surface-color);
    --cusdis-text-color: var(--text-color);
    --cusdis-accent-color: var(--accent-color);
    --cusdis-border-color: var(--border-color);
    --cusdis-input-background: #222; /* input background */
    --cusdis-input-text-color: #eee; /* input text */
    --cusdis-button-background: var(--accent-color);
    --cusdis-button-text-color: #000;
}

/* Force Cusdis to expand to fit content (if Cusdis JS supports it) */
#cusdis_thread iframe {
    height: 100% !important;
}

/* Inputs and textareas */
#cusdis_thread textarea,
#cusdis_thread input {
    background-color: #222 !important;
    color: #eee !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 8px;
}

/* Submit button */
#cusdis_thread button {
    background-color: var(--accent-color) !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#cusdis_thread button:hover {
    background-color: #3aa8d1 !important;
    box-shadow: 0 0 12px rgba(98, 200, 243, 0.5) !important;
    color: #000 !important;
}

/* Scrollbar styling for iframe if it still scrolls */
#cusdis_thread iframe::-webkit-scrollbar {
    width: 8px;
}

#cusdis_thread iframe::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

#cusdis_thread iframe::-webkit-scrollbar-track {
    background-color: #111;
}

/* Optional: smooth font for Cusdis */
#cusdis_thread,
#cusdis_thread iframe {
    font-family: 'Nunito', sans-serif !important;
}

Final Thoughts

And that is it. You now have a lightweight, privacy-respecting comment section that loads exclusively on your articles.

By injecting the widget via JavaScript, you bypass WriteFreely's template limitations while maintaining total control over the look and feel. Your readers can now interact with your content in a space that feels like a natural extension of your blog's “hacker” aesthetic—no tracking pixels attached.