CWD Comments Integration Guide

I successfully initialized an Astro project and integrated the CWD Comments System.

Key Changes

1. Project Initialization: Created a new Astro project using the basics template.
2. Component Creation: Built a reusable Astro component [src/components/CwdComments.astro].

---
interface Props {
  apiBaseUrl: string;
  elId?: string;
  pageSize?: number;
  theme?: 'light' | 'dark';
}
const { apiBaseUrl, elId = 'comments', pageSize = 20, theme = 'light' } = Astro.props;
---

<!-- 1. Container: Use data attributes to pass parameters to the script -->
<div
  id={elId}
  class="cwd-comments-container"
  data-el-id={elId}
  data-api-base-url={apiBaseUrl}
  data-page-size={pageSize}
  data-theme={theme}
>
</div>
<!-- 2. Import library: Keep is:inline for loading at any time -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. Initialization script: Use module to import your utility functions -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // Define initialization logic
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // Prevent duplicate initialization
      if (el.children.length > 0 || el.dataset.cwdInitialized) return;
      const apiBaseUrl = el.dataset.apiBaseUrl;
      const theme = el.dataset.theme;
      const pageSize = Number(el.dataset.pageSize);

      // Check if library has loaded
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // Mark as initialized
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] Init failed:', e);
        }
      } else {
        // If script is still loading, poll briefly
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // Re-trigger
            initComments();
          }
        }, 100);
        // Stop after 5 seconds
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // Return cleanup function (optional)
    return () => {
      // CWD may not provide destroy method, just empty container
    };
  };
  // 4. Register with PageInitManager
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

3. Page Integration: Added the comment component to the homepage [src/pages/index.astro].

Configuration

The comment system requires an API URL to connect to the backend. Update the apiBaseUrl attribute in [src/pages/index.astro] (or wherever you use this component).

File: [src/pages/index.astro]

<CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

Make sure to replace https://cmt-api.xxx.com with your actual deployed Worker URL.

Component Usage

You can use the CwdComments component in any Astro page or layout:

---
import CwdComments from '../components/CwdComments.astro';
---

<CwdComments
  apiBaseUrl="https://cmt-api.xxx.com"
  elId="comments"
  theme="light"
/>

Verification

The project builds successfully. Run the dev server to view the comment component (ensure the API URL is configured correctly):

npm run dev

Reusing in Other Astro Projects

To use this comment system in other Astro projects, no need to redeploy the backend or admin panel. Just copy the frontend component.

1. Copy Component: Copy [src/components/CwdComments.astro] to your new project’s src/components/ directory. Note: If your project uses View Transitions, ensure you keep the registerPageInit logic.

2. Add to Page: Import and use in your page:

   ---
   import CwdComments from '../components/CwdComments.astro';
   ---
   
   <CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

3. Unique Identification: The system automatically distinguishes comments by page URL (path). As long as the new project’s domain or path differs, comments will be automatically isolated.

Staying Updated

Since CWD is in early development with frequent updates, follow this update strategy:

1. Backend (API):

   • Run git fetch upstream and git merge upstream/main in the cwd directory to sync code.
   • Run npm install to update dependencies.
   • Run npx wrangler d1 migrations apply CWD_DB (if database changes exist).
   • Run npm run deploy to deploy the new Worker version.

2. Frontend Component:

   • Update the script URL version in src/components/widgets/CwdComments.astro:

     <script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>

   • Use @latest for the latest version (recommended for development), or specify a version number (e.g., @0.0.5) for stability.

3. Admin Panel:

   • Pull latest code (same as backend steps).
   • Run npm install and npm run build.
   • Redeploy to Cloudflare Pages: npx wrangler pages deploy dist --project-name cwd-admin.

Published at: Feb 6, 2026 · Modified at: Feb 6, 2026

RR

Build