Ниже представлен пример код для вставки 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>
Параметр | Тип | Описание |
---|---|---|
root | string | Контейнер куда загрузится виджет комментариев |
app_id | integer | ID сайта, возможно получить после регистрации сайта на сервисе |
title | string | Заголовок страницы где выводится виджет. |
author | string | Имя и фамилия или логин автора страницы где выводится виджет. Например, если выводится в блоге, то автор стратьи. |
language | string | Язык виджета, доступные языки: ru (Русский), en (Английский), uk (Украинский) |
track_get_params | boolean | Учитывать GET параметры или нет. По умолчанию false . Таким образом, http://anycomment.io/ и https://anycomment.io/?page=1 будут иметь одинаковые комментарии. Если вы хотите, чтобы комментарии отличались, включите эту опцию. |
mode | string | В каком режиме запускать виджет комментариев. Доступные: any - загружает по умолчанию комментарии, moderation_only - загружает панель модерации без возможности выйти из нее. |
sso | object | Объект SSO для автоматической авторизации пользователя в виджете. Документация. |
ssoProvider | object | Объект SSO для добавления собственного способа авторизации. |
providers | array | Список провайдеров (социальных сетей) отображемых для авторизации. Данная опция приоритетнее настроек сайта. Возможные варианты: vkontakte, twitter, facebook, google, github, odnoklassniki, instagram, twitch, steam, yandex, mailru, dribbble, bitbucket, discord, custom. custom - собственный способ авторизации, настраивается через ssoProvider . |
page_url | string | Ссылка на страницу с которой отображать комментарии. Пример: https://anycomment.io/demo. |
counter | string or function | string - HTML id элемента куда вставить счетчик, выведет число. function для динамичного вывода, сигнатура: function(count) . |
showAuthAlert | boolean | Отображать сообщение о том, что пользователю нужно авторизоваться или нет. Обычно используется вместе с событием authRequested для кастомизации процесса авторизации. |
design_set | string | Код дизайна (slug) комментариев. Можно создать и настраить в визуальном редакторе. Значение должно в нижнем регистре и состоять только из "a-z", "0-9" и "-". По умолчанию: default . |
initType | string | Тип загрузки виджета. init - загружать сразу после загрузки страницы, lazy - загружается в момент когда пользователь попадает в область виджета. По умолчанию: lazy . |
i18n | object | Позволяет заменять существующие строки на собственные для разных языков. Доступные языки: en , ru , uk . |
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,
}
})
// ...
Параметр | Тип | Описание |
---|---|---|
title | string | Название компании или сайта. |
loginUrl | string | Ссылку на страницу авторизацию на сайте |
logoUrl | string | Ссылку на лого сайта или компании |
width | string | Ширина изображения, по умолчанию 30. Должно быть 1 к 1 с height . |
height | string | Высота изображения, по умолчанию 30. Должно быть 1 к 1 с width . |
openModal | string | true означает открывать loginUrl в модальном окошке, false сделает обычный редирект. |
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 | Позволяет подписаться на событие. Принимает два параметра, eventName (название событие) и callback (функция, которая будет вызвана событием) |
trigger | Позволяет вызвать определенно событие. Принимает, eventName (название события) и payload (данные, отправляемые вместе с событием) |
Список subscribe событий:
init
- обозначает готовность виджета. Событие без параметров.loginModalClose
- вызывается при закрытии модального окна авторизации (пользователем или при тайм-ауте). Сигнатура: function (provider) {}
authRequested
- вызывается когда требуется авторизацию для какого-либо действия, к примеру, когда пользователь пытается отправить комментарий как гость.Список trigger событий:
openPage
- возможные значения: "moderation/index" (откроет страницу модерации) и "profile/update" (откроект страницу
изменения профиля)logout
- сделает пользователя гостем, тоже самое, что если пользователь нажмет "Выйти" в профиле