Installation

Der Einbettungscode

Kopieren Sie Ihren Einbettungscode unter Site Console → Ihr Widget → Install & Embed; Ihr App Key ist dort bereits eingetragen.

<script defer src="https://embeds.crowment.com/comments.js"></script>

<crow-comments app-key="YOUR_APP_KEY"></crow-comments>

1. Setzen Sie das <script>-Tag in den <head> Ihrer Seiten. Es muss nur einmal pro Seite geladen werden.
2. Setzen Sie das <crow-comments>-Tag in den <body>, dorthin, wo der Kommentarbereich erscheinen soll, meist direkt unter Ihren Artikel.

Das ist die ganze Installation. Das Widget passt sich der Breite des umgebenden Elements an.

WordPress

Das Plugin Crowment Comments ersetzt die eingebauten WordPress-Kommentare durch das Widget; Sie müssen Ihr Theme nicht bearbeiten.

1. Laden Sie crowment-comments.zip herunter.
2. Öffnen Sie in WordPress Plugins → Add New → Upload Plugin, wählen Sie die ZIP-Datei und dann Install Now und Activate.
3. Fügen Sie unter Settings → Crowment Comments Ihren App-Key ein und speichern Sie.

Ihre bisherigen WordPress-Kommentare bleiben in der Datenbank; solange das Plugin aktiv ist, sind sie ausgeblendet. Für ein Update laden Sie die neue ZIP-Datei auf dieselbe Weise hoch und bestätigen, dass die aktuelle Version ersetzt wird.

Frameworks und Website-Baukästen

<crow-comments> ist eine Standard-Web-Component und funktioniert überall, wo Sie HTML einfügen können: statische Websites, CMS-Themes, React, Vue, Svelte, Angular und mehr.

Manche Frameworks warnen vor unbekannten Tags. Teilen Sie ihnen mit, dass crow-comments ein Custom Element ist:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'crow-comments',
    },
  },
})

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'crow-comments',
        },
      },
    }),
  ],
}

Single-Page-Apps

Sie müssen das Widget nicht neu erzeugen, wenn Ihre App die Route wechselt. Es verfolgt die clientseitige Navigation selbst (pushState, replaceState sowie Zurück- und Vorwärts-Schaltflächen) und lädt den Verlauf der neuen Seite.

Welchen Verlauf eine Seite zeigt

Jede Seite hat ihren eigenen Verlauf. Standardmäßig erkennt das Widget eine Seite an ihrem URL-Pfad und ignoriert den Rest der Adresse. Für https://example.com/blog/hallo?ref=mail#kommentare ist das /blog/hallo. Das bedeutet:

• /blog/hallo?utm_source=newsletter und /blog/hallo teilen sich einen Verlauf.
• /blog/hallo und /blog/hallo/ sind unterschiedliche Pfade und haben daher unterschiedliche Verläufe. Halten Sie Ihre URLs einheitlich.
• Verläufe gehören zu einem Widget. Zwei Widgets teilen nie Kommentare, auch nicht auf demselben Pfad.

Drei Attribute ändern, wie eine Seite erkannt wird:

• watch-query nimmt die Query-Parameter in alphabetischer Reihenfolge in die Seitenkennung auf, sodass ?b=2&a=1 und ?a=1&b=2 gleich sind. Nutzen Sie es, wenn die Query den Inhalt auswählt, etwa bei /watch?v=abc123. Jeder Parameter zählt, auch Tracking-Parameter wie utm_source.
• watch-hash nimmt den Hash in die Seitenkennung auf. Nutzen Sie es für Hash-basiertes Routing wie /#/posts/42.
• page-id ersetzt die URL durch eine Kennung Ihrer Wahl. Nutzen Sie es, wenn derselbe Inhalt unter mehreren URLs liegt oder sich Ihre URLs ändern könnten. Ein stabiler Wert wie die Datenbank-ID Ihres Beitrags hält den Verlauf bei jeder URL-Änderung an der Seite.

<crow-comments app-key="YOUR_APP_KEY" page-id="post-1842"></crow-comments>

Auf einen Kommentar verlinken

Hängen Sie crowment_cid mit einer Kommentar-ID an eine beliebige Seiten-URL, um die Seite mit dem Verlauf dieses Kommentars zu öffnen, etwa https://example.com/blog/hallo?crowment_cid=COMMENT_ID. Kommentar-IDs lassen sich im Menü des Kommentars im Widget kopieren.

Attributreferenz

Boolesche Attribute sind aktiv, sobald sie vorhanden sind: <crow-comments app-key="…" watch-query>. Sie können jedes Attribut nach dem Laden der Seite ändern, und das Widget folgt.