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

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

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

Чтобы чат появился на вашем сайте, скопируйте 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', '//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:

  • parentEncodedChatId - id родительского чата;
  • chatTitle - уникальное название чата, которое будет использоваться в качестве идентификатора чата.

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

Пример:

<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', '//www.chatbro.com/embed.js?' + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } /* Chatbro Widget Embed Code End */ ChatbroLoader({ parentEncodedChatId: 'your parent id', chatTitle: 'It\'s a child chat' // Some uniq title for chat }); </script>

Если дочерний чат не будет создан, причина будет напечатана в консоли браузера.

Обратите внимание, что при редактировании любого дочернего чата, вы автоматически перенаправляетесь в редактор родительского чата (там будет соответствующее уведомление). Будьте внимательны при настройке родительского чата, тк изменения мгновенно отразятся на всех дочерних чатах.

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

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

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

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

ПараметрТипЗначение
chatLanguageStringЯзык интерфейса чата: [auto, en, enrtl, ru, pt, fr, fa, es, nl, de, ro, tt, bg, ar]
По умолчанию auto
parentEncodedChatIdStringИспользуется при создании динамического чата. Подробнее.
По умолчанию null
chatGreetingStringПоказывать краткое сообщение при загрузке чата.
По умолчанию null
Идентификаторы чата
encodedChatIdStringСоздается автоматически при создании чата через конструктор.
encodedChatGuidStringЦелочисленный номер, закодированный алгоритмом md5 и используемый для идентификации чатов.
chatAliasStringКраткое имя чата, которое вы можете установить в конструкторе чата.
Цвета
chatHeaderBackgroundColorStringЦвет чата, в любом формате.
По умолчанию #2D3341
chatHeaderTextColorStringЦвет текста шапки чата.
По умолчанию #FFFFFF
chatBodyBackgroundColorStringЦвет фона блока с сообщениями.
По умолчанию #F7F8FC
chatBodyTextColorStringЦвет текста блока с сообщениями.
По умолчанию #3F4549
chatInputBackgroundColorStringЦвет фона блоков отправки и участников.
По умолчанию #FFFFFF
chatInputTextColorStringЦвет текста блоков отправки и участников.
По умолчанию #3F4549
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
Меню чата
showChatMenuBooleanПоказывать меню чата.
По умолчанию true
menuItemsArrayЭлементы меню. Передайте массив объектов: [ {url, title, iconUrl}, ... ].
По умолчанию 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
siteUserAvatarUrlStringUrl аватара пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserProfileUrlStringСсылка на профиль пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
allowedLoginMethodsArrayМассив возможных методов аутентификации.
По умолчанию ['guest', 'vk', 'tg', 'google', 'fb']
customLoginLinkStringДобавляет дополнительный метод авторизации в меню входа.
По умолчанию null
signatureStringЗащита от подмены имени, вычисляется на сервере на основе переданных параметров как md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + 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 2019-10-18

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

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

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

Определите url, на котором разместите историю, и создайте на этой странице чат с рекомендуемыми параметрами. (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) - Скрытый это бан или нет. По умолчанию нет.
    • 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
      • playerUrl
      • thumbnailPhotoUrls
    • 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. Защиту от спуфинга. Страницу истории для индексации поисковыми машинами. Просты в установке и настройке чата.

Wordpress

Плагин чата для wordpress наш флагман. Размещён на собственной странице.

Vbulletin 3.8

Скачайте файл ru_product-chatbro.xml

Выполните импорт. Для этого авторизуйтесь в vBulletin, переместитесь во вкладку Products & Hooks \ Manage Products и кликните по ссылке Add/Import Product.

Выберите скачанный файл и нажмите импорт.

Откройте меню настроек и выберите «ChatBro options».

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

Vbulletin 4

Скачайте файл ru_product-chatbro.xml

Выполните импорт. Для этого авторизуйтесь в vBulletin, переместитесь во вкладку Products & Hooks \ Manage Products и кликните по ссылке Add/Import Product.

Выберите скачанный файл и нажмите импорт.

Откройте меню настроек и выберите «ChatBro options».

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

Vbulletin 5

Скачайте файл ru_chatbro_product.zip

Скопируйте содержимое папки core из скаченного архива в вашу vBulletin директорию. После этого вы должны увидеть core/packages/chatbro в вашей vBulletin директории.

Выполните импорт. Для этого авторизуйтесь в vBulletin, переместитесь во вкладку Products & Hooks \ Manage Products и кликните по ссылке Add/Import Product.

Введите «./packages/chatbro/xml/product_chatbro.xml» в поле или выполните импорт xml файла с сервера и нажмите импорт.

Откройте меню настроек и выберите «ChatBro options».

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

IP.Board

Необходимо зайти в администраторский раздел вашего форума, перейти во вкладку «Внешний вид» и выбрать, стиль который установлен по умолчанию.

В боковом меню выбираем шаблон globalTemplate и вставляем код перед закрывающим тегом </body>

<php> if ($this->memberData['member_id'] > 0) { $cb_id = $this->memberData['member_id']; $cb_displayName = $this->memberData['name']; $cb_profile = $this->settings['board_url'] . '/index.php?/user/'.$cb_id.'-'.$name.'/'; $cb_avatar = $this->memberData['pp_small_photo']; } </php> <script> /* 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", "//www.chatbro.com/embed.js?" + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } /* Chatbro Widget Embed Code End*/ var param = { chatPath: "vk/Тестовая беседа", containerDivId: "" }; if ("{$cb_id}") { param.siteUserFirstName = "{$cb_displayName}"; param.siteUserLastName = " "; param.siteUserExternalId = "{$cb_id}"; param.siteUserProfileUrl = "{$cb_profile}"; param.siteUserAvatarUrl = "{$cb_avatar}"; } ChatbroLoader(param); </script>
phpBB3

Зайдите на сайт через FTP и откройте файл /includes/functions.php.

После строчки

$l_login_logout = sprintf($user->lang['LOGOUT_USER'], $user->data['username']);

вставьте следующий код:

$cb_id = $user->data['user_id']; $cb_profile = 'http://'.$config['server_name'].$config['script_path'] . '/memberlist.php?mode=viewprofile&u='.$user->data['user_id']; switch ($user->data['user_avatar_type']) { case 1: $cb_avatar = 'http://'.$config['server_name'].$config['script_path'] . '/download/file.php?avatar='.$user->data['user_avatar']; break; case 2: $cb_avatar = $user->data['user_avatar']; break; }

После строчки

'BOARD_URL' => $board_url

вставьте следующий код:

'CB_ID' => $cb_id, 'CB_PROFILE' => $cb_profile, 'CB_AVATAR' => $cb_avatar,

Далее необходимо зайти в администраторский раздел вашего форума и перейти во вкладку «Стили».

В боковом меню переходим в раздел «Шаблоны», выбираем используемый Вами стиль и жмем «Изменить».

Выбираем для редактирования шаблон «overall_footer.html» и вставляем код, не забудьте изменить переменную «chatPath».

<script> /* 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", "//www.chatbro.com/embed.js?" + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } /* Chatbro Widget Embed Code End*/ var param = { chatPath: "vk/Тестовая беседа", containerDivId: "" }; if ("{CB_ID}") { param.siteUserFirstName = "{S_USERNAME}"; param.siteUserLastName = " "; param.siteUserExternalId = "{CB_ID}"; param.siteUserProfileUrl = "{CB_PROFILE}"; param.siteUserAvatarUrl = "{CB_AVATAR}"; } ChatbroLoader(param); </script>
fluxbb

Зайдите на сайт через FTP и откройте файл footer.php (находится в корне сайта).

Между тегами </div> и <?php вставьте следующий код:

<?php // Find your secretKey in "My chats" on chatbro.com (you must be logged) $secretKey = ""; $siteDomain = ""; preg_match('/<img src="(.*)" width/i', generate_avatar_markup($pun_user['id']), $avatarPath); if($secretKey && $siteDomain) { $str = $siteDomain; $str .= $pun_user['id']; $str .= addslashes($pun_user['username']); $str .= $avatarPath[1]; $str .= $pun_config['o_base_url']; $str .= '/profile.php?id='.$pun_user['id']; $str .= $secretKey; $signature = md5($str); } ?> <script> /* 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", "//www.chatbro.com/embed.js?" + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } /* Chatbro Widget Embed Code End*/ var userId = "<?php echo $pun_user['id'] ?>"; var param = { //how to create chatPath: http://www.chatbro.com/en/documentation/#chatpath chatPath: "tg/208397015/Ask your own question", containerDivId: "", siteDomain: "<?php echo $siteDomain ?>" }; if(userId!=1) { param.siteUserExternalId = userId; param.siteUserFullName = "<?php echo addslashes($pun_user['username']) ?>"; param.siteUserProfileUrl = "<?php echo $pun_config['o_base_url'] ?>/profile.php?id=" + userId; param.siteUserAvatarUrl = "<?php echo $avatarPath[1] ?>"; if ("<?php echo $signature ?>") { param.signature = "<?php echo $signature ?>"; } } //Uncomment to hide chat from unauthorized users //if(userId!=1) ChatbroLoader(param); </script>

Чтобы создать страницу с историей для индексации, скачайте архив.

Файл «files/chat_history.php» переместите из архива в корень сайта. На 37 строке в этом файле нужно изменить значение chatPath.

Далее, откройте файл «header.php» (в корне сайта) и после фрагмента:

else { $links[] = '<li id="navprofile"'.((PUN_ACTIVE_PAGE == 'profile') ? ' class="isactive"' : '').'><a href="profile.php?id='.$pun_user['id'].'">'.$lang_common['Profile'].'</a></li>'; if ($pun_user['is_admmod']) $links[] = '<li id="navadmin"'.((PUN_ACTIVE_PAGE == 'admin') ? ' class="isactive"' : '').'><a href="admin_index.php">'.$lang_common['Admin'].'</a></li>'; $links[] = '<li id="navlogout"><a href="login.php?action=out&id='.$pun_user['id'].'&csrf_token='.pun_csrf_token().'">'.$lang_common['Logout'].'</a></li>'; }

добавьте следующий код:

$links[] = '<li id="navchathistory"><a href="chat_history.php">Chat history</a></li>';
Simplemachines

Скачайте файл chatbro_sm.zip

Необходимо зайти в менеджер пакетов, выбрать скачанный архив и загрузить его.

В открывшемся окне переходим к установке мода.

Нажимаем установить сейчас.

Через 5 секунд вы будете перемещены на страницу настроек, где обязательно нужно изменить только первый параметр - Chat path

Ucoz

Необходимо зайти в панель управления сайтом, перейти в раздел управление дизайном и создать новый глобальный блок 'CHATBRO'.

Переходим в режим редактирования шаблонов и выбираем только что созданный блок 'CHATBRO'. Вставляем приведенный ниже код и изменяем значение chatPath. Так же вы можете расскомментировать соответствующие строки в конце кода для ограничения прав гостей.

<script> /* 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", "//www.chatbro.com/embed.js?" + btoa(unescape(encodeURIComponent(JSON.stringify(params)))), async); xhr.send(); } function showSysMessage() { document.addEventListener('chatLoaded', function() { document.addEventListener('chatInputClick', function(event) { var chat = event.chat; chat.lockSendMessage(); chat.showSystemMessage('Только для зарегистрированных участников! <link><a href="$HOME_PAGE_LINK$register">$HOME_PAGE_LINK$register</a></link>'); }); }); } /* Chatbro Widget Embed Code End */ var param = { chatPath: 'vk/ddosoff/Тестовая беседа', containerDivId: '' } if ("$USER_LOGGED_IN$") { param.siteUserFullName = "$USERNAME$"; param.siteUserExternalId = "$USER_ID$"; param.siteUserProfileUrl = "$HOME_PAGE_LINK$index/8-$USER_ID$"; var avatar = "$USER_AVATAR_URL$"; if(avatar.indexOf("http")!=-1) param.siteUserAvatarUrl = avatar; else if(avatar) param.siteUserAvatarUrl = "$HOME_PAGE_LINK$"+avatar; } // раскомментировать следующую строку, чтобы запретить гостям писать сообщения и требовать от них логина. // showSysMessage(); // раскомментировать следующую строку, чтобы скрыть чат от гостей. // if("$USER_LOGGED_IN$") ChatbroLoader(param); </script>

Выбираем шаблон 'Нижняя часть сайта' и вставляем переменную '$GLOBAL_CHATBRO$' перед закрывающим тегом </footer>.

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)