Виджет

Виджет последних комментариев

Установка

Добавить следующий код на страницу где нужно расположить виджет с последними комментариями:


<div id="anycomment-stream"></div>
<script>
    AnyComment = window.AnyComment || [];
    AnyComment.CommentStream = [];
    AnyComment.CommentStream.push({
        app_id: APP_ID,
        root: "anycomment-stream"
    });
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://widget.anycomment.io/stream/embed.js";
    var sa = document.getElementsByTagName("script")[0];
    sa.parentNode.insertBefore(s, s.nextSibling);
</script>

Замените APP_ID на ID своего сайта. Для этого нужно зарегистрироваться и добавить сайт.

Опции

Параметр	Тип	Описание
`root`	`string`	ID элемента, куда будет добавлен виджет
`app_id`	`integer`	ID сайта, возможно получить после регистрации сайта на сервисе
`url`	`string`	URL страницы для которой отобразить последние комментарии. Если не указано, тогда отобразятся комментарии со всего сайта.
`language`	`string`	Язык виджета. Доступные: `ru`, `en`, `uk`.
`design`	`object`	Опции по настройке дизайна виджета. Подробнее смотерть "Настройки дизайна".
`limit`	`number`	Количество комментариев для отображения. Максимально `100`. по умолчанию: `5`.
`widgetWidth`	`number`	Ширина виджета. Можно указать `%`, `em`, `rem` или число для пикселей. По умолчанию на всю ширину.
`showWidgetHeader`	`boolean`	Скрыть заголовок виджета или нет.
`openCommentNewTab`	`boolean`	Опция позволяет контролировать нажатие на комментарий - открыть в новой вкладке или в той же.
`maximumPreviewChars`	`integer`	Максимальное количество символов в тексте комментария для отображения. По умолчанию: `100`. `0` - без ограничений (весь комментарий).
`pageUrlMutator`	`function`	Функция для обработки ссылку для перехода на комментарий. Подробнее смотреть "Настройка ссылки на комменатрий".
`pageTitlePosition`	`string`	Позиция заголовка страницы. Возможные значения: `beforeComment` (перед комментарием), `afterComment` (после комментария).
`avatarSize`	`string` or `number`	Размер аватарки автора комментария. По умолчанию: '30px'. Если указать как число, к нему автоматически добавится `px`.
`i18n`	`object`	Опция позволяет контролировать переводы виджета. Подробнее смотреть "Настройка языка".

Настройка дизайна

Вы можете использовать объект design для кастомизации дизайна виджета под сайт.

Параметр	Тип	Описание
`primaryColor`	`string`	Основной цвет в HEX формате.
`hintColor`	`string`	Цвет текста в HEX для второстепенны элементов, такие как даты, кол-во комментариев на странице.
`widgetBackgroundColor`	`string`	Цвет текста в HEX для фона виджета.

Настройка языка

По умолчанию, если не указывать опцию i18n, тогда она состоит из следующих переводов:

{
  "ru": {
    "no_comments": "Пока еще не было комментариев.",
    "widget_title": "Последние комментарии"
  },
  "en": {
    "no_comments": "No comments so far.",
    "widget_title": "Latest comments"
  }
}

Структура данных следующая: ключ объекта - это язык, значение - это строки перевода.

Давайте рассмотрим пример того, как заменить переводы для русского языка:

AnyComment.CommentStream.push({
    app_id: APP_ID,
    root: "anycomment-stream",
    i18n: {
        ru: {
            no_comments: 'Нет комментариев.',
            widget_title: 'Лента комментариев',
        }
    }
});

Обратите внимание, что необязательно указывать переводы для всех языков, достаточно поменять для своего. Виджет автоматически поставит значения по умолчанию для других.

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

Вы можете использовать параметр pageUrlMutator для манипуляции ссылок на комментарий.

Например, вы можете задать собственный домен:

AnyComment.CommentStream.push({
    app_id: APP_ID,
    root: "anycomment-stream",
    pageUrlMutator: function (url) {
        const link = document.createElement('a');
        link.href = url;
        return 'http://example.com' + link.pathname + link.hash;
    }
});

Или устанавливать домен на основе того, где стоит виджет:

AnyComment.CommentStream.push({
    app_id: APP_ID,
    root: "anycomment-stream",
    pageUrlMutator: function (url) {
        const link = document.createElement('a');
        link.href = url;
        return window.location.origin + link.pathname + link.hash;
    }
});