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

Установка

Ниже представлен пример код для вставки HTML-виджета комментариев:

<div id="anycomment-app"></div>
<script>
    AnyComment = window.AnyComment || [];
    AnyComment.Comments = [];
    AnyComment.Comments.push({
        "root": "anycomment-app",
        "app_id": 1, // <--- замените на 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>

Опции

Параметр ssoProvider

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

// ..
AnyComment.Comments.push({
    "root": "anycomment-app",
    "app_id": 1,
    "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,
    }
})
// ...

Параметр counter

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

// ...
AnyComment.Comments.push({
    "root": "anycomment-app",
    "app_id": 1,
    "language": "ru",
    "counter": function(count) {
        // Тут делаете любые манипуляции до вывода счетчика
        console.log("Количество комментариев", count);
    }
})
// ...

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

В дополнении, в 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.

Перевод и/или замена строк

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

Для этого используется специальный параметр - i18n. Передается как объект, где ключ это язык и значение это вложенный объект с переводами. Подробнее о формате можно посмотреть в примере ниже.

На данный момент виджет поддерживает следующие языки: ru, en и uk.

Пример:

// ...
AnyComment.Comments.push({
    "root": "anycomment-app",
    "app_id": 1,
    "language": "ru",
    "i18n": {
        "ru": {
            "be_first_to_comment": "Оставить отзыв первым..."
        },
        "en": {
            "be_first_to_comment": "Leave first review..."
        }
    }
})
// ...

Все доступные строки для переводов:

{
    "add_comment": "Добавить комментарий...",
    "name": "Имя",
    "be_first_to_comment": "Оставить комментарий первым...",
    "edit": "Изменить",
    "reply": "Ответить",
    "post": "Отправить",
    "cancel": "Отменить",
    "update": "Изменить",
    "oop_something_went_wrong": "Упс, что-то пошло не так.",
    "delete": "Удалить",
    "load_more": "Загрузить еще",
    "login_with_part": "Войти через",
    "or_as_guest_part": "Или как гость",
    "dropdown_logout": "Выйти",
    "email": "Почта",
    "validation_error_use_socials_to_leave_comment": "Пожалуйста используйте любую из социальных сетей ниже, чтобы оставить комментарий.",
    "please_use_social_to_leave_comment": "Пожалуйста используйте одну из социальных сетей, чтобы оставить комментарий.",
    "close": "Закрыть",
    "validation_error_comment_email_required": "Укажите вашу почту",
    "validation_error_comment_editor_required": "Пожалуйста укажите комментарий",
    "validation_error_comment_name_required": "Укажите ваше имя",
    "validation_error_comment_email_invalid": "Неправильный формат почты",
    "moderation_approve": "Одобрить",
    "moderation_spam": "Спам",
    "moderation_delete": "Удалить",
    "button_return_to_comments": "Вернуться к комментариям",
    "moderation_tab_this_website": "На этом сайте",
    "moderation_tab_all_websites": "Все сайты",
    "moderation_menu_item": "Модерация",
    "sort_by_popularity": "Популярные",
    "sort_by_order": "По порядку",
    "moderation_approve_all": "Одобрить все",
    "moderation_no_comments": "Пока не было комментариев...",
    "social_name_vkontakte": "ВКонтакте",
    "social_name_dribbble": "Dribbble",
    "social_name_facebook": "Фейсбук",
    "social_name_github": "GitHub",
    "social_name_google": "Google",
    "social_name_instagram": "Instagram",
    "social_name_mailru": "Mail.Ru",
    "social_name_odnoklassniki": "Одноклассники",
    "social_name_steam": "Steam",
    "social_name_telegram": "Telegram",
    "social_name_twitch": "Twitch",
    "social_name_twitter": "Twitter",
    "social_name_wordpress": "WordPress",
    "social_name_yahoo": "Yahoo",
    "social_name_yandex": "Яндекс",
    "selected_comments_count": "Выбрано комментариев: {{count}}",
    "moderation_queued_comments": "Комментариев в очереди: {{count}}",
    "filter_dropdown_all_comments": "Все комментарии",
    "filter_dropdown_only_spam": "Только спамные",
    "filter_dropdown_only_pending": "Только неодобренные",
    "filter_dropdown_only_approved": "Только одобренные",
    "moderation_status_pending": "В ожидании",
    "moderation_status_approved": "Одобрено",
    "moderation_status_spam": "Спам",
    "moderation_comments_count": "Комментариев: {{count}}",
    "moderation_tab_all_websites_queue": "Вся очередь",
    "status_on": "на",
    "social_name_whatsapp": "WhatsApp",
    "social_share_dropdown": "Поделиться",
    "link_copied": "Скопировано!",
    "rating_separator": "из",
    "rating_tooltip_summary": "всего оценок: {{ratingCount}}, средняя оценка: {{ratingAverage}}",
    "format_name_bold": "Жирный",
    "format_name_italic": "Курсив",
    "format_name_list_ordered": "Нумерованный список",
    "format_name_list_bullet": "Маркированный список",
    "format_name_blockquote": "Цитата",
    "format_name_code": "Код",
    "dropdown_update_profile": "Редактировать профиль",
    "field_first_name": "Имя",
    "field_last_name": "Фамилия",
    "field_email": "Почта",
    "field_username": "Логин",
    "field_about": "О себе",
    "field_gender_male": "Мужской",
    "field_gender_female": "Женский",
    "button_save": "Сохранить",
    "header_profile_update": "Редактировать профиль",
    "avatar_upload": "Загрузить аватар",
    "avatar_drag_drop_leave_to_upload": "Отпустите аватарку, чтобы загрузить...",
    "avatar_drag_drop_to_upload": "Кроме этого вы можете перенести аватарку сюда. Она должна быть в соотношении 1х1, например, 300x300. Доступные форматы: JPEG или PNG. Максимальный размер: 3 Мб.",
    "button_go_back": "Вернуться",
    "field_gender": "Пол",
    "field_confirmation_code": "Код подтверждения",
    "confirm_email_title": "Подтвердите смену почты",
    "confirm_email_paragraph": "У вас не подтверждена новая почта. Введите полученный 6-значный код в поле ниже:",
    "alert_success_profile_updated": "Профиль успешно изменен.",
    "alert_success_avatar_uploaded": "Аватарка успешно загружена!",
    "alert_error_avatar_notice": "Пожалуйста обратите внимание, что формат вашей аватарки JPEG или PNG и она не более 3 МБ.",
    "alert_success_email_changed": "Новая почта была установлена.",
    "label_notify_about_comments": "Уведомлять о комментариях",
    "notice_login_to_subscribe": "Пожалуйста авторизуйтесь, чтобы подписаться на комментарии на этой странице.",
    "please_login_to_proceed": "Пожалуйста, авторизуйтесь, чтобы продолжить.",
    "alert_profile_update_email": "Обратите внимание, что при смене почты на вашу старую почту будет отправлено письмо-подтверждение. Без подтверждения новая почта не будет установлена.",
    "field_signature": "Подпись.",
    "hint_field_signature": "Вы можете использовать это поле для ввода собственной подписи, которая будет добавлять в поле комментария при добавлении комментария. Это работает схоже с подписью в почтовых сервисах.",
    "format_name_link": "Ссылка",
    "header_comment_counter": "Комментариев: {{count}}",
    "format_name_image": "Прикрепить изображение",
    "validation_error_social_user_registered": "Эта почта уже используется для авторизации через \"{{socialName}}\".",
    "validation_error_user_registered": "Эта почта уже зарегистрирована, пожалуйста используете почту и пароль для авторизации.",
    "or_login_with": "или войти с",
    "or_signup_with": "или присоединиться с",
    "button_login": "Войти",
    "field_password": "Пароль",
    "paragraph_not_registered_yet": "Еще не зарегистрированы?",
    "button_signup": "Присоединиться",
    "paragraph_already_registered": "Уже зарегистрированы?",
    "validation_error_string_too_short": "Поле должно быть минимум {{min}} символов.",
    "validation_error_email_invalid": "Неправильный формат почты.",
    "validation_error_incorrect_email_or_password": "Неправильная почта или пароль.",
    "validation_error_required_field": "Это поле является обязательным.",
    "footer_link_privacy": "Конфиденциальность",
    "footer_link_terms": "Условия",
    "notice_social_authorization": "Если вы нажмете на любую из социальных сетей и не зарегистрированы, вы будете зарегистрированы и, следовательно, согласитесь с нашими <0>Условиями</0> и <1>Политикой конфиденциальности</1>",
    "header_password_reset": "Сбросьте свой пароль",
    "paragraph_password_reset_form": "Введите почту от вашего аккаунта, и мы вышлем вам ссылку для восстановления пароля.",
    "button_reset_password": "Восстановить пароль",
    "link_return_to_login_form": "Вернуться ко входу",
    "link_forgot_password": "Забыли пароль?",
    "validation_error_user_unknown": "Такая почта не существует.",
    "validation_error_unconfirmed_email": "Эта почта еще не подтверждена. Пожалуйста, проверьте вашу почту и подтвердите регистрацию.",
    "link_login": "Войти",
    "alert_email_confirmed": "Почта подтверждена успешно.",
    "alert_signup_success_check_email": "Почти закончили. Мы отправили вам письмо подтверждение на почту, пожалуйста перейдите по нему.",
    "alert_password_changed": "Пароль изменен успешно. Вы были автоматически авторизованы.",
    "button_change_password": "Изменить пароль",
    "header_change_password": "Изменение пароля",
    "paragraph_change_password_form": "Пожалуйста, укажите новый пароль для Вашего аккаунта.",
    "field_new_password": "Новый пароль",
    "alert_success_password_reset_request": "Пожалуйста, проверьте Вашу почту для дальнейшей инструкции по смене пароля.",
    "share": "Поделиться",
    "danger_zone_header": "Зона опасности",
    "danger_zone_please_delete_my_profile": "Удалить мой профиль",
    "danger_zone_never_mind": "Закрыть это",
    "danger_zone_modal_are_you_sure_delete": "Вы уверены, что хотите удалить Ваш профиль? Это необратимое действие. Комментарии под Вашим именем станут анонимными. Обратите внимание, что данное действие может занять до 1 дня. ",
    "danger_zone_yes_delete_my_profile": "Удалить мой профиль",
    "danger_zone_success_request_sent": "Нам очень жаль, что Вы уходите. Мы получили Ваш запрос на удаление данных, он будет обработан в ближайшее время.",
    "notice_comments_closed_for_this_page": "Комментарии закрыты для этой страницы.",
    "this_comment_is_pinned": "Закрепленный комментарий.",
    "pin_it": "Закрепить",
    "unpin_it": "Снять с закрепления",
    "alert_success_comment_is_pinned": "Комментарий закреплен успешно.",
    "alert_error_failed_to_pin": "Ошибка закрепления комментария.",
    "alert_success_comment_is_unpinned": "Комментарий откреплен успешно.",
    "alert_error_failed_to_unpin": "Ошибка открепления комментария.",
    "field_banlist_user_id": "ID пользователя",
    "field_banlist_ip": "IP-адрес",
    "field_banlist_period": "Длительность бана",
    "field_banlist_comment": "Комментарий",
    "alert_success_ip_banned": "IP-адрес заблокирован.",
    "alert_success_user_banned": "Пользователь заблокирован.",
    "alert_error_user_already_banned": "Данный пользователь уже заблокирован.",
    "alert_error_ip_already_banned": "Данный IP-адрес уже заблокирован.",
    "alert_error_unknown_ban_period": "Неизвестный период бана.",
    "option_ban_user": "Заблокировать пользователя",
    "option_ban_by_ip": "Заблокировать IP",
    "option_unban_user": "Разблокировать пользователя",
    "option_unban_by_ip": "Разблокировать IP",
    "alert_success_user_unbanned": "Данный пользователь успешно разблокирован.",
    "alert_success_ip_unbanned": "IP-адрес успешно разблокирован.",
    "alert_error_user_not_banned": "Данный пользователь не заблокирован.",
    "alert_error_ip_not_banned": "Данный IP-адрес не заблокирован.",
    "option_ban_hour": "Час",
    "option_ban_day": "День",
    "option_ban_week": "Неделя",
    "option_ban_month": "Месяц",
    "option_ban_year": "Год",
    "field_complaint_type": "Тип жалобы",
    "field_complaint_comment": "Комментарий",
    "option_complaint_type_spam": "Спам",
    "option_complaint_type_disagreement": "Я не согласен с пользователем",
    "option_complaint_type_targeted_harassment": "Целевое преследование",
    "option_complaint_type_inappropriate_profile": "Недопустимый формат профиля",
    "option_complaint_type_threatening_content": "Угрожающий контент",
    "option_complaint_type_impersonate": "Выдача себя за другое лицо",
    "option_complaint_type_private_information": "Личная информация",
    "alert_success_complaint_created": "Жалоба успешно отправлена.",
    "alert_error_complaint_creation": "Ошибка во время отправки жалобы. Попробуйте чуть позже.",
    "comment_action_complain": "Отправить жалобу",
    "alert_warning_comment_pending_approval": "Комментарий, который вы запрашиваете находится на модерации.",
    "limit_notice": "Вы превысили лимит показов виджета по тарифу. На данный момент, мы ограничили некоторые функции модерации, такие как одобрение, удалить и изменение комментариев.",
    "read_more": "Подробнее",
    "comment_deleted": "Комментарий удален."
}

События

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

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

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

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

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

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

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

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

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