Документация

Создание чата

Используйте веб конструктор, чтобы создать и сконфигурировать чат через веб интерфейс. Используйте готовые плагины: WordPressOpencartJoomla

Чтобы чат появился на вашем сайте, скопируйте javascript код из конструктора в раздел head html кода сайта. Код достаточно вставить один раз. При изменении настроек в конструкторе чат на сайте будет меняться автоматически.

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

<script id="chatBroEmbedCode"> /* Chatbro Widget Embed Code Start */ function ChatbroLoader(chats, async) { async = !1 !== async; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], lang: navigator.language || navigator.userLanguage, needLoadCode: 'undefined' == typeof Chatbro, embedParamsVersion: localStorage.embedParamsVersion, chatbroScriptVersion: localStorage.chatbroScriptVersion }, xhr = new XMLHttpRequest; xhr.withCredentials = !0; xhr.onload = function() { eval(xhr.responseText); }; xhr.onerror = function() { console.error('Chatbro loading error') }; xhr.open('GET', 'https://www.chatbro.com/embed.js?' + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } /* Chatbro Widget Embed Code End */ ChatbroLoader({ encodedChatId: 'YOUR ENCODED CHAT_ID' }); </script>

Динамическое создание

Например, вам нужны разные чаты для разных страниц вашего сайта. Если у вас есть видеохостинг, вы можете создать отдельный чат для каждого видео. Создавайте эти чаты на лету, используя функцию динамических чатов. Больше информации.

Таблица параметров

При создании чата в функцию ChatbroLoader передаются параметры, являющиеся приоритетными над параметрами из базы и сохраняющиеся в конструкторе.

Три типа чата:

  • Статичный Встраивается в определенный блок на странице.
  • Перемещаемый Свободно масштабируется и перемещается по странице. Контейнер под него можно создать в любом месте.
  • История Как и статичный, встраивается в определенный блок страницы, разбивает историю чата на страницы, которые используются для индексации поисковиком.

ПараметрТипЗначение
Идентификаторы чата
encodedChatIdStringСоздается автоматически при создании чата через конструктор.
encodedChatGuidStringЦелочисленный номер, закодированный алгоритмом md5 и используемый для идентификации чатов.
chatAliasStringКраткое имя чата, которое вы можете установить в конструкторе чата.
Общее
chatTitleStringНазвание чата.
chatLanguageStringЯзык интерфейса чата: [auto, en, enrtl, ru, pt, fr, fa, es, nl, de, ro, tt, bg, ar, tr]
По умолчанию auto
parentEncodedChatIdStringИспользуется при создании динамического чата. Подробнее.
По умолчанию null
chatGreetingStringПоказывать краткое сообщение при загрузке чата.
По умолчанию null
Цвета
chatHeaderBackgroundColorStringЦвет чата, в любом css формате.
По умолчанию #2D3341
chatHeaderTextColorStringЦвет текста шапки чата.
По умолчанию #FFFFFF
chatBodyBackgroundColorStringЦвет фона блока с сообщениями.
По умолчанию #F7F8FC
chatBodyTextColorStringЦвет текста блока с сообщениями.
По умолчанию #121212
chatInputBackgroundColorStringЦвет фона блоков отправки и участников.
По умолчанию #FFFFFF
chatInputTextColorStringЦвет текста блоков отправки и участников.
По умолчанию #353535
chatLinksTextColorStringЦвет ссылок
По умолчанию #2B6DAD
coloredUserNamesBooleanВключить или отключить цветные имена пользователей.
По умолчанию false
Размещение
isStaticBooleanВозможность перемещать чат.
По умолчанию false
chatStateStringCостояние чата: раскрытый 'maximized' и свернутый 'minimized'.
По умолчанию maximized
containerDivIdStringId контейнера, в который будет встроен чат. Параметр можно пропустить для перемещаемого чата. Если контейнер не будет найден на странице, он будет создан автоматически после кода вставки или в нижней части страницы.
Развернутый чат
chatHeightStringВысота чата. Минимальная доступная высота чата составляет 238 пикселей. Вы можете использовать различные единицы для размеров.
По умолчанию 250px
chatWidthStringШирина чата. Минимальная доступная ширина чата - 290 пикселей с включенными аватарами и 250 пикселей, если они отключены. Вы можете использовать различные единицы для размеров.
По умолчанию 100% for static chat and 350px for movable chat
chatTopStringВерхняя левая Y-координата открытого чата. Отступ сверху будет иметь приоритет над отступом снизу. Игнорируется для статичного чата.
По умолчанию null
chatLeftStringКоордината X левого верхнего угла раскрытого чата. Отступ слева будет иметь приоритет над отступом справа. Игнорируется для статичного чата.
По умолчанию null
chatBottomStringКоордината Y правого нижнего угла раскрытого чата. Для неподвижного чата игнорируется.
По умолчанию 2vh
chatRightStringКоордината X правого нижнего угла раскрытого чата. Для неподвижного чата игнорируется.
По умолчанию 2vw
showChatBorderBooleanПоказывать рамку чата.
По умолчанию false
showChatShadowBooleanТень чата.
По умолчанию false
Свернутый чат
minimizedChatTitleStringНазвание для свернутого перемещаемого чата.
По умолчанию null
minimizedChatIconStringЗначок для перемещаемого свернутого чата. Доступны следующие значения: [icon_1, icon_2, icon_3, icon_4, icon_5, icon_6, icon_7].
minimizedChatBorderRadiusStringРадиус для перемещаемого свернутого чата.
По умолчанию 5px
minimizedChatPositionStringПоложение для перемещаемого свернутого чата. Доступны следующие значения: [left, right, bottom].
По умолчанию bottom
minimizedChatRightStringКоордината X относительно правого нижнего угла для свернутого чата. Отступ справа будет иметь приоритет над отступом слева. Игнорируется, если чат является статичным или, если minimizedChatPosition равно left или right.
По умолчанию 20px
minimizedChatLeftStringКоордината X относительно левого нижнего угла для свернутого чата. Игнорируется, если чат является статичным или, если minimizedChatPosition равно left или right.
По умолчанию null
minimizedChatBottomStringY-координата свернутого чата. Игнорируется, если чат статиченый.
По умолчанию 20px
Cообщения
messageFontSiseStringРазмер шрифта текста в сообщени. Только в пикселях.
По умолчанию 12px
showUsersAvatarsBooleanПоказать аватары пользователей.
По умолчанию true
avatarBorderRadiusStringРадиус аватаров.
По умолчанию 3px
showDateOfMessageBooleanДата у сообщений.
По умолчанию true
highlightRepliesBooleanПодсветка ответов.
По умолчанию true
allowLinkToProfileBooleanПоказать ссылки на профиля пользователя.
По умолчанию true
showBorderBetweenMessagesBooleanГраница между сообщениями.
По умолчанию true
Меню чата
menuItemsArrayЭлементы меню. Передайте массив объектов: [ {url(string), title(string), iconUrl(string), isBlank(boolean)}, ... ].
По умолчанию null
Права
allowUploadMessagesBooleanВозможность обновлять в чате контент: подгружать старые сообщения, добавлять новые.
По умолчанию true
allowSendMessagesBooleanВозможность отправлять сообщения. Только при allowUploadMessages = true.
По умолчанию true
allowResizeChatBooleanВозможность растягивать чат.
По умолчанию true
allowMinimizeChatBooleanВозможность сворачивать чат.
По умолчанию true
allowUploadFileBooleanВозможность загрузки файлов.
По умолчанию true
showParticipantCountBooleanПоказывать кол-во участников.
По умолчанию true
showMinimizedParticipantCountBooleanПоказывать кол-во участников для свернутого чата.
По умолчанию true
allowFullScreenImageBooleanРазрешить открывать картинки в полноэкранном режиме. В противном случае откроется в новой вкладке.
По умолчанию true
showTitleNotificationBooleanПоказывать уведомление о новом сообщении в заголовок вкладки браузера.
По умолчанию false
disableImagesBooleanНе конвертировать ссылки в изображения
По умолчанию false
Пользователи
siteDomainStringДомен, на котором установлен чат. Должен передаваться вместе с siteUserExternalId, если используется аутентификация через сайт.
По умолчанию null
siteUserExternalIdStringId пользователя на сайте установившем чат.
По умолчанию null
siteUserFullNameStringИмя пользователя на сайте установившем чат. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserFullNameColorStringЦвет имени пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserAvatarUrlStringUrl аватара пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserProfileUrlStringСсылка на профиль пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
allowedLoginMethodsArrayМассив разрешенных методов аутентификации.
По умолчанию ['guest', 'vk', 'tg', 'google', 'fb']
customLoginLinkStringДобавляет дополнительный метод авторизации в меню входа.
По умолчанию null
signatureStringЗащита от подмены имени, вычисляется на сервере на основе переданных параметров как md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + siteUserFullNameColor + permissions + secretKey). Вы можете найти Ваш секретный ключ в конструкторе чата, включив Защиту от спуфинга.
Параметры siteDomain и secretKey всегда участвуют при расчете. Остальные могут быть опущены, если Вы не используете их в ChabroLoader. Пример: https://codepen.io/ChatBro/pen/booKRx?editors=0010
Подробнее
По умолчанию null
permissionsArrayМассив допустимых методов модерации. Используется только в связке с параметром signature. Возможные варианты: ban (возможность банить пользователей), delete (возможность удалять сообщения). Пример: https://codepen.io/ChatBro/pen/booKRx?editors=0010
По умолчанию []
История
useStandardHistoryWidgetSettingsBooleanСтандартный пресет для истории чата.
По умолчанию false
chatPaginatorUrlPrefixStringПуть к последней странице истории. Пример: https://www.chatbro.com/history. Обязательный параметр для виджета истории.
hideMessagesOverflowBooleanПодстраивать высоту чата под высоту контента.
По умолчанию true
showChatOuterFrameBooleanПоказывать рамку чата. Используется, только когда контент не подгоняется под заданную высоту.
По умолчанию true
batchIdStringНомер страницы истории чата. Используется для отображения истории и пейджинатора.
По умолчанию null
Updated 2021-04-24

Индексация чата

Для индексации используется отдельный url с разбитой по страницам историей чата.

Пример:  http://www.chatbro.com/43eM/history

Вставьте сюда чат с опцией истории (useStandardHistoryWidgetSettings = true).

Для навигации по истории нужно в параметрах чата передать chatPaginatorUrlPrefix Он будет использоваться в пэйджинатор. Пэйджинатор будет доступен только в том случае, если обновление сообщений отключено (allowUploadMessages = false).

При переходе по страницам, номер страницы добавляется в url. Его надо передать в параметре batchId.

ChatbroLoader({ encodedChatId: '43eM', containerDivId: "someDivId", useStandardHistoryWidgetSettings: true, chatPaginatorUrlPrefix: 'http://www.chatbro.com/43eM/history' });

See the Pen History_en by ChatBro (@ChatBro) on CodePen.


Единый вход

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

Фильтрация сообщений

Чтобы избежать нежелательных сообщений, вы можете включить фильтрацию сообщений на стороне сервера. Это можно сделать в конструкторе чата, в разделе «Администрирование». Функция фильтра использует JavaScript. Оператор return использует объект Java со статичными методами, которые возвращают различные действия (например, принимают, изменяют или отклоняют сообщение и другие).

Простейшая функция выглядит следующим образом:

function filter(lastMessages, newMessage, result) { return result.accept(); }

Она просто принимает сообщение пользователя без каких-либо проверок.

Parameters
  • newMessage - объект Message
  • lastMessages - массив из 10 объектов Message
  • result - объект со статичными методами, возвращающими различные действия
Return statements
  • Принять сообщение

    result.acceptMessage();
    result.acceptMessage("{comment: 'some text'}");

    • comment (String) - информационное сообщение для пользователя.

  • Отклонить сообщение

    result.declineMessage("{comment: 'some text'}");

    • comment (String) - предупреждающее сообщение для пользователя.

  • Изменить сообщение

    result.changeMessage(messageObject);
    result.changeMessage(messageObject, "{comment: 'some text'}");

    • comment (String) - информационное сообщение для пользователя.
    • messageObject (Object) - объект Message

  • Заблокировать пользователя

    result.banUser("{banDurationMin: 15, reason: 'some reason', banType: 'IP', isShadow: false, comment: 'some text for user'}");

    • banDurationMin (Long) - длительность бана в минутах.
    • reason (String) - причина бана.
    • isShadow (Boolean) - cкрытый это бан или нет. По умолчанию нет.
    • comment (String) - предупреждающее сообщение в момент, когда пользователь получит бан.
    • banType (String) - 2 опции: IP - бан по ip; ID - бан по id пользователя. По умолчанию IP.

  • Показать информационное сообщение

    result.showInfo("{message: 'some text'}");


  • Показать предупреждающее сообщение

    result.showWarning("{message: 'some text'}");

Объект Message
  • originalText - текст сообщения
  • attachments - вложения в форме массива
    • fileAttachments
      • type = FILE
      • fileUrl
      • fileName
      • fileSize
    • photoAttachments
      • type = PHOTO
      • title
      • thumbnailPhotoUrl
      • originalPhotoUrl
    • videoAttachments
      • type = VIDEO
      • title
      • description
      • thumbnailPhotoUrl
      • playerUrl
      • thumbnailPhotoUrls
  • domain - реферер отправителя
  • url - полный адрес, откуда отправили сообщение
  • creatorId - id отправившего
  • creatorExternalId - внешний id отправившего
  • creatorFullName - имя отправившего
  • creatorAvatarUrl - аватар отправившего в виде урла
  • creatorProfileUrl - урл до профиля отправившего
  • creationDate - время отправки сообщения

События

События выполняют с чатом всевозможные действия. Например, фильтровать ссылки. Обработчики событий определяются только после инициализации чата (срабатывает событие chatLoaded). События привязываются только к документу.

Пример:

document.addEventListener('chatLoaded', function() {
    document.addEventListener(...);
    document.addEventListener(...);
    document.addEventListener(...);
    ...
});
chatLoaded

Срабатывает при окончании инициализации чата.

newMessage

Срабатывает, когда приходит новое сообщение в чат. Предоставляет доступ к сообщению и его контейнеру.

Проиграть звук на сообщение, если вкладка не активна:

document.addEventListener('chatLoaded', function(event) {
    event.chat.audioControl.loadSoundFile('http://www.soundjay.com/misc/sounds/handbag-lock-4.mp3');
    document.addEventListener('newMessage', function(event) {
        var chat = event.chat;
        if (!chat.isActiveTab()) {
            event.chat.audioControl.play();
        }
    });
});

See the Pen New message event by ChatBro (@ChatBro) on CodePen.

maximizeChat, minimizeChat

Срабатывает при разворачивании/сворачивании чата.


See the Pen maximize & minimize by ChatBro (@ChatBro) on CodePen.

chatInputClick

Срабатывает, когда пользователь нажимает на поле ввода. При этом блокируется отправка сообщения. Удобно использовать этот эвент, чтобы пользователь залогинился перед отправкой.


See the Pen chatInputClick by ChatBro (@ChatBro) on CodePen.

beforeSendMessage

Используйте для фильтрации URL и работы с вложениями. Сработает перед отправкой сообщения. Имеет доступ к объекту (Message), который пользователь хочет отправить.

Структура объекта Message:

{
    text: '', - Текст сообщения
    attachments: [
        {
            type: 'photo/video', - тип вложения
            thumbnailPhotoUrl: '', - url превью изображения
            originalPhotoUrl: '', - url изображения
            playerUrl: '' - Url вложения. Только для type = video
        }
        ...
    ],
    links: [
        {
            host: '', - хост ссылки
            protocol: '', - протокол ссылки
            url: '' - оригинальный адрес ссылки
        }
        ...
    ]
}

Имеет два callback'а:

onSuccess(Message) - Отправка обработанного объекта Message.
onFail(text) - Срабатывает alert с сообщением - text.


See the Pen beforeSendMessage_en by ChatBro (@ChatBro) on CodePen.

chatbroPtCountChanging

Событие срабатывает, когда меняется кол-во человек в чате.

See the Pen Get current online by ChatBro (@ChatBro) on CodePen.

CMS

Плагины реализуют прозрачную аутентификацию для пользователей CMS. Защиту от спуфинга. Страницу истории для индексации поисковыми машинами. Просты в установке и настройке чата.

Incorrect signature

Signature (хэш-подпись) - уникальная строка, которая генерируется на сервере пользователя на основе параметров, переданных в функцию ChatbroLoader, и передаётся на сервер чатбро, где сравнивается. Подпись нужна для защиты чата от подмены пользователей и передачи данных с чужих доменов. Хэш-подпись защищает ваш чат от копирования на другие сайты. Если включена защита от спуфинга, чат будет работать, только если подпись рассчитана верно и домен сайта соответствует переданному.
Больше о спуфинге 

Как исправить ошибку?

Возникает, если у чата включена опция защиты от спуфинга, но подпись рассчитана неверно или не передана. Самый простой, но не лучший способ избавиться - отключить защиту от спуфинга в редакторе чата. Зайдите на chatbro, 'Мои чаты', выберите чат, редактировать. В разделе 'Аутентификация' уберите галочку 'Защита от спуфинга'. Проверьте правильность введенных параметров для решения проблемы.

Минимальный набор параметров, передаваемых в функцию:

md5(siteDomain + secretKey)

Функция для примера на JavaScript: crypto.createHash('md5').update('localhostd60c97a2-ae7a-47a3-a72f-4a5b645711ec').digest('hex')

Способ передачи с дополнительными параметрами (некоторые, кроме минимальных, можно опустить, порядок важен):

md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + permission + secretKey)