Instalación

El código de inserción

Copia tu código de inserción desde Site Console → tu widget → Install & Embed, donde tu app key ya está incluida.

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

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

1. Coloca la etiqueta <script> en el <head> de tus páginas. Basta con cargarla una vez por página.
2. Coloca la etiqueta <crow-comments> en el <body>, donde deba aparecer la sección de comentarios, normalmente justo después de tu artículo.

Esa es toda la instalación. El widget se ajusta al ancho del elemento que lo rodea.

WordPress

El plugin Crowment Comments sustituye los comentarios integrados de WordPress por el widget; no hace falta editar tu tema.

1. Descarga crowment-comments.zip.
2. En WordPress, ve a Plugins → Add New → Upload Plugin, elige el zip y selecciona Install Now y luego Activate.
3. En Settings → Crowment Comments, pega tu app key y guarda.

Tus comentarios de WordPress siguen en la base de datos; quedan ocultos mientras el plugin está activo. Para actualizar el plugin, sube el nuevo zip de la misma forma y confirma que quieres reemplazar la versión actual.

Frameworks y creadores de sitios

<crow-comments> es un componente web estándar, así que funciona en cualquier lugar donde puedas añadir HTML: sitios estáticos, temas de CMS, React, Vue, Svelte, Angular y otros.

Algunos frameworks avisan de etiquetas desconocidas. Indícales que crow-comments es un elemento personalizado:

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

Aplicaciones de una sola página

No hace falta volver a crear el widget cuando tu aplicación cambia de ruta. Sigue la navegación del lado del cliente por sí solo (pushState, replaceState y los botones de atrás y adelante) y carga el hilo de la nueva página.

Qué hilo muestra una página

Cada página tiene su propio hilo. Por defecto, el widget identifica una página por la ruta de su URL e ignora el resto de la dirección. Para https://example.com/blog/hola?ref=mail#comentarios eso es /blog/hola. Es decir:

• /blog/hola?utm_source=newsletter y /blog/hola comparten un hilo.
• /blog/hola y /blog/hola/ son rutas distintas, así que tienen hilos distintos. Mantén tus URL coherentes.
• Los hilos pertenecen a un widget. Dos widgets nunca comparten comentarios, aunque la ruta sea la misma.

Tres atributos cambian cómo se identifica una página:

• watch-query añade los parámetros de consulta a la identidad de la página, en orden alfabético, así que ?b=2&a=1 y ?a=1&b=2 son iguales. Úsalo cuando la consulta selecciona el contenido, como en /watch?v=abc123. Cuentan todos los parámetros, incluidos los de seguimiento como utm_source.
• watch-hash añade el hash a la identidad de la página. Úsalo con enrutamiento basado en hash, como /#/posts/42.
• page-id sustituye la URL por un identificador que tú eliges. Úsalo cuando el mismo contenido está en varias URL o cuando tus URL podrían cambiar. Un valor estable, como el ID de la entrada en tu base de datos, mantiene el hilo unido a la página aunque cambie la URL.

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

Enlazar a un comentario

Añade crowment_cid con el ID de un comentario a la URL de cualquier página para abrirla con el hilo de ese comentario cargado, por ejemplo https://example.com/blog/hola?crowment_cid=COMMENT_ID. Los ID de los comentarios se pueden copiar desde el menú del comentario en el widget.

Referencia de atributos

Los atributos booleanos están activos cuando aparecen: <crow-comments app-key="…" watch-query>. Puedes cambiar cualquier atributo después de cargar la página y el widget lo sigue.