Installation

Le code d'intégration

Copiez votre code d'intégration depuis Site Console → votre widget → Install & Embed, où votre app key est déjà renseignée.

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

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

1. Placez la balise <script> dans le <head> de vos pages. Il suffit de la charger une fois par page.
2. Placez la balise <crow-comments> dans le <body>, là où l'espace de commentaires doit apparaître, en général juste après votre article.

L'installation s'arrête là. Le widget s'adapte à la largeur de l'élément qui l'entoure.

WordPress

L'extension Crowment Comments remplace les commentaires intégrés de WordPress par le widget ; inutile de modifier votre thème.

1. Téléchargez crowment-comments.zip.
2. Dans WordPress, allez dans Plugins → Add New → Upload Plugin, choisissez le zip, puis Install Now et Activate.
3. Dans Settings → Crowment Comments, collez votre clé d'app et enregistrez.

Vos commentaires WordPress existants restent dans votre base de données ; ils sont masqués tant que l'extension est active. Pour mettre l'extension à jour, envoyez le nouveau zip de la même façon et confirmez le remplacement de la version actuelle.

Frameworks et créateurs de sites

<crow-comments> est un web component standard : il fonctionne partout où vous pouvez ajouter du HTML, qu'il s'agisse de sites statiques, de thèmes de CMS, de React, Vue, Svelte, Angular ou d'autres.

Certains frameworks signalent les balises inconnues. Indiquez-leur que crow-comments est un élément personnalisé :

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',
        },
      },
    }),
  ],
}

Applications monopages

Inutile de recréer le widget quand votre application change de route. Il suit lui-même la navigation côté client (pushState, replaceState et les boutons précédent et suivant) et charge le fil de la nouvelle page.

Quel fil une page affiche

Chaque page a son propre fil. Par défaut, le widget identifie une page par le chemin de son URL et ignore le reste de l'adresse. Pour https://example.com/blog/bonjour?ref=mail#commentaires, c'est /blog/bonjour. Autrement dit :

• /blog/bonjour?utm_source=newsletter et /blog/bonjour partagent un même fil.
• /blog/bonjour et /blog/bonjour/ sont des chemins différents et ont donc des fils différents. Gardez des URL cohérentes.
• Les fils appartiennent à un widget. Deux widgets ne partagent jamais de commentaires, même sur le même chemin.

Trois attributs changent la façon dont une page est identifiée :

• watch-query ajoute les paramètres de requête à l'identité de la page, par ordre alphabétique : ?b=2&a=1 et ?a=1&b=2 sont donc identiques. Utilisez-le quand la requête sélectionne le contenu, comme dans /watch?v=abc123. Tous les paramètres comptent, y compris ceux de suivi comme utm_source.
• watch-hash ajoute le hash à l'identité de la page. Utilisez-le pour un routage par hash comme /#/posts/42.
• page-id remplace l'URL par un identifiant de votre choix. Utilisez-le quand un même contenu existe à plusieurs URL ou quand vos URL risquent de changer. Une valeur stable, comme l'identifiant de l'article dans votre base de données, garde le fil attaché à la page quel que soit le changement d'URL.

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

Lien vers un commentaire

Ajoutez crowment_cid suivi de l'identifiant d'un commentaire à l'URL de n'importe quelle page pour l'ouvrir avec le fil de ce commentaire chargé, par exemple https://example.com/blog/bonjour?crowment_cid=COMMENT_ID. Les identifiants de commentaire se copient depuis le menu du commentaire dans le widget.

Référence des attributs

Les attributs booléens sont actifs dès qu'ils sont présents : <crow-comments app-key="…" watch-query>. Vous pouvez modifier n'importe quel attribut après le chargement de la page, et le widget suit.