Виджет

Виджет комментариев

Установка

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


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

Замените APP_ID на ID своего сайта.

Опции

ПараметрТипОписание
rootstringКонтейнер куда загрузится виджет комментариев
app_idintegerID сайта, возможно получить после регистрации сайта на сервисе
titlestringЗаголовок страницы где выводится виджет.
authorstringИмя и фамилия или логин автора страницы где выводится виджет. Например, если выводится в блоге, то автор стратьи.
languagestringЯзык виджета, доступные языки: ru (Русский), en (Английский), uk (Украинский)
track_get_paramsbooleanУчитывать GET параметры или нет. По умолчанию false. Таким образом, http://anycomment.io/ и https://anycomment.io/?page=1 будут иметь одинаковые комментарии. Если вы хотите, чтобы комментарии отличались, включите эту опцию.
modestringВ каком режиме запускать виджет комментариев. Доступные: any - загружает по умолчанию комментарии, moderation_only - загружает панель модерации без возможности выйти из нее.
ssoobjectОбъект SSO для автоматической авторизации пользователя в виджете. Документация.
ssoProviderobjectОбъект SSO для добавления собственного способа авторизации.
providersarrayСписок провайдеров (социальных сетей) отображемых для авторизации. Данная опция приоритетнее настроек сайта. Возможные варианты: vkontakte, twitter, facebook, google, github, odnoklassniki, instagram, twitch, steam, yandex, mailru, dribbble, bitbucket, discord, custom. custom - собственный способ авторизации, настраивается через ssoProvider.
page_urlstringСсылка на страницу с которой отображать комментарии. Пример: https://anycomment.io/demo.
counterstring|functionstring - HTML id элемента куда вставить счетчик, выведет число. function для динамичного вывода, сигнатура: function(count).
showAuthAlertbooleanОтображать сообщение о том, что пользователю нужно авторизоваться или нет. Обычно используется вместе с событием authRequested для кастомизации процесса авторизации.
design_setstringКод дизайна (slug) комментариев. Можно создать и настраить в визуальном редакторе. Значение должно в нижнем регистре и состоять только из "a-z", "0-9" и "-". По умолчанию: "default".

Параметр ssoProvider

ssoProvider может быть указан в виде функции, пример:

<div id="anycomment-app"></div>
<script>
AnyComment = window.AnyComment || []; AnyComment.Comments = [];
AnyComment.Comments.push({
    "root": "anycomment-app",
    "app_id": APP_ID,
    "language": "ru",
    "ssoProvider": {
        title: "My App",
        loginUrl: "https://example.com/login",
        logoUrl: "https://example.com/my-app-logo.jpg",
        width: 30,
        height: 30,
        openModal: true,
    }
})
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "https://widget.anycomment.io/comment/embed.js";
var sa = document.getElementsByTagName("script")[0];
sa.parentNode.insertBefore(s, s.nextSibling);
</script>
ПараметрТипОписание
titlestringНазвание компании или сайта.
loginUrlstringСсылку на страницу авторизацию на сайте
logoUrlstringСсылку на лого сайта или компании
widthstringШирина изображения, по умолчанию 30. Должно быть 1 к 1 с height.
heightstringВысота изображения, по умолчанию 30. Должно быть 1 к 1 с width.
openModalstringtrue означает открывать loginUrl в модальном окошке, false сделает обычный редирект.

Параметр counter

counter может быть указан в виде функции, пример:

<div id="anycomment-app"></div>
<script>
AnyComment = window.AnyComment || []; AnyComment.Comments = [];
AnyComment.Comments.push({
    "root": "anycomment-app",
    "app_id": APP_ID,
    "language": "ru",
    "counter": function(count) {
        // Тут делаете любые манипуляции до вывода счетчика
        console.log("Количество комментариев", count);
    }
})
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "https://widget.anycomment.io/comment/embed.js";
var sa = document.getElementsByTagName("script")[0];
sa.parentNode.insertBefore(s, s.nextSibling);
</script>

Такой вариант может пригодится сайтам, где нужно вывести количество комментарие со склонениями или другими манипуляциями.

В дополении, в counter можно указать ID CSS селектор, например, #my-counter и тогда в элемент #my-counter после загрузки виджета отобразится цифра из количество комментариев на странице.

Параметр page_url

Давай рассмотрим на примере: если виджет находится на странице https://example.com/page, а в page_url указано https://example.com/page2, тогда комментарии выведутся как для https://example.com/page2. Обратите внимание, что параметры title, author должны совпадать с содержанием страницы указанной в page_url.

События

Для управления виджетом вы можете восспользоваться CommentManager'ом.

Вот пример его работы:

document.addEventListener('DOMContentLoaded', (event) => {
    var manager = window.AnyComment.CommentManager;
    if (manager) {
        manager.subscribe('init', function () {
            // Виджет готов к работе
        });
    }
})

Мы добавили нашего менджера на события загрузки страницы. Далее мы слушаем событие init, которые укажет нам, что виджет готов к работе.

CommentManager поддерживает следующие методы:

ПараметрОписание
subscribeПозволяет подписаться на событие. Принимает два параметра, eventName (название событие) и callback (функция, которая будет вызвана событием)
triggerПозволяет вызвать определенно событие. Принимает, eventName (название события) и payload (данные, отправляемые вместе с событием)

Список subscribe событий:

  • init - обозначает готовность виджета. Событие без параметров.
  • loginModalClose - вызывается при закрытии модального окна авторизации (пользователем или при тайм-ауте). Сигнатура: function (provider) {}
  • authRequested - вызывается когда требуется авторизацию для какого-либо действия, к примеру, когда пользователь пытается отправить комментарий как гость.

Список trigger событий:

  • openPage - возможные значения: "moderation/index" (откроет страницу модерации) и "profile/update" (откроект страницу изменения профиля)
  • logout - сделает пользователя гостем, тоже самое, что если пользователь нажмет "Выйти" в профиле