Установка

Код встраивания

Скопируйте код встраивания в разделе Site Console → ваш виджет → Install & Embed — app key там уже подставлен.

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

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

1. Поместите тег <script> в <head> страниц. Достаточно загрузить его один раз на страницу.
2. Поместите тег <crow-comments> в <body> — туда, где должен появиться блок комментариев, обычно сразу после статьи.

На этом установка закончена. Виджет подстраивается под ширину окружающего элемента.

WordPress

Плагин Crowment Comments заменяет встроенные комментарии WordPress виджетом; править тему не нужно.

1. Скачайте crowment-comments.zip.
2. В WordPress откройте Plugins → Add New → Upload Plugin, выберите zip-файл, нажмите Install Now, затем Activate.
3. В Settings → Crowment Comments вставьте ключ приложения (app key) и сохраните.

Существующие комментарии WordPress остаются в базе данных; пока плагин активен, они скрыты. Чтобы обновить плагин, загрузите новый zip так же и подтвердите замену текущей версии.

Фреймворки и конструкторы сайтов

<crow-comments> — стандартный веб-компонент, поэтому он работает везде, где можно добавить HTML: на статических сайтах, в темах CMS, в React, Vue, Svelte, Angular и других.

Некоторые фреймворки предупреждают о неизвестных тегах. Сообщите им, что crow-comments — пользовательский элемент:

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

Одностраничные приложения

Пересоздавать виджет при смене маршрута не нужно. Он сам отслеживает навигацию на стороне клиента (pushState, replaceState, кнопки «назад» и «вперёд») и загружает ветку новой страницы.

Какую ветку показывает страница

У каждой страницы своя ветка. По умолчанию виджет определяет страницу по пути URL и игнорирует остальную часть адреса. Для https://example.com/blog/privet?ref=mail#comments это /blog/privet. Это значит:

• /blog/privet?utm_source=newsletter и /blog/privet используют одну ветку.
• /blog/privet и /blog/privet/ — разные пути, поэтому и ветки у них разные. Следите за единообразием URL.
• Ветки принадлежат одному виджету. Два виджета никогда не делят комментарии, даже на одном и том же пути.

Три атрибута меняют способ определения страницы:

• watch-query добавляет параметры запроса к идентификатору страницы в алфавитном порядке, так что ?b=2&a=1 и ?a=1&b=2 считаются одинаковыми. Используйте его, когда содержимое выбирается запросом, как в /watch?v=abc123. Учитываются все параметры, включая метки отслеживания вроде utm_source.
• watch-hash добавляет хеш к идентификатору страницы. Используйте его при маршрутизации через хеш, например /#/posts/42.
• page-id заменяет URL выбранным вами идентификатором. Используйте его, когда одно и то же содержимое доступно по нескольким URL или URL могут измениться. Стабильное значение, например ID записи в вашей базе данных, сохраняет ветку за страницей при любой смене URL.

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

Ссылка на комментарий

Добавьте к URL любой страницы параметр crowment_cid с ID комментария, чтобы открыть её с загруженной веткой этого комментария, например https://example.com/blog/privet?crowment_cid=COMMENT_ID. ID комментария можно скопировать из его меню в виджете.

Справочник атрибутов

Логические атрибуты включены, если они указаны: <crow-comments app-key="…" watch-query>. Любой атрибут можно изменить после загрузки страницы — виджет это учтёт.