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

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

Используйте веб конструктор, чтобы создать и сконфигурировать чат через веб интерфейс. Используйте готовые плагины: 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>

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

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

Используйте идентификацию чата через chatPath только при динамической генерации чатов. Для удобства используйте веб конструктор, который выдаёт идентификатор чата encodedChatId.

Параметр chatPath - строковый уникальный идентификатор вашего чата, состоит из трех частей:
<Название соц. сети>/<Id администратора/владельца чата в этой сети>/<Уникальное название чата>

  1. Название соц. сети
    Чату доступны Telegram и ВКонтакте. В chatPath выглядит как tg и vk соответственно.
  2. Id администратора/владельца чата в этой сети
    Уникальный идентификатор. Залогиньтесь у нас и узнайте ваш id в разделе «Мои чаты».
  3. Уникальное название чата
    Используется как заголовок окна чата.

Пример идентификации тестовой беседы по chatPath - 'vk/ddosoff/Тестовая беседа'. Полный код:

<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({ chatPath: 'vk/ddosoff/Тестовая беседа' }); </script>

Пример размещения двух чатов на одной странице с несколькими конфигурационными параметрами:

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

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

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

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

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

ПараметрТипЗначение
containerDivIdStringId контейнера, в который будет встроен чат. Параметр можно пропустить при встраивании одного перемещаемого чата, контейнер создастся автоматически.
chatLanguageStringЯзык интерфейса чата: [auto, en, enrtl, ru, pt, fr, fa, es, nl, de, ro, tt, bg, ar]
По умолчанию auto
parentEncodedChatIdStringИспользуйте при динамическом создании чата. Созданный чат будет использовать функцию родительского фильтра.
Идентификаторы чата
chatPathStringИдентификатор чата в формате: <название соц.сети>/<id владельца чата в соц.сети>/<название чата>.
encodedChatIdStringСоздается автоматически при создании чата через конструктор.
encodedChatGuidStringЦелочисленный номер, закодированный алгоритмом md5 и используемый для идентификации чатов.
chatAliasStringКраткое имя чата, которое вы можете установить в конструкторе чата.
Внешний вид
chatHeaderBackgroundColorStringЦвет чата, в любом формате.
По умолчанию #2D3341
chatHeaderTextColorStringЦвет текста шапки чата.
По умолчанию #FFFFFF
chatBodyBackgroundColorStringЦвет фона блока с сообщениями.
По умолчанию #F7F8FC
chatBodyTextColorStringЦвет текста блока с сообщениями.
По умолчанию #3F4549
chatInputBackgroundColorStringЦвет фона блоков отправки и участников.
По умолчанию #FFFFFF
chatInputTextColorStringЦвет текста блоков отправки и участников.
По умолчанию #3f4549
coloredUserNamesBoolВключить или отключить цветные имена пользователей.
По умолчанию false
Пользователи
siteDomainStringДомен, на котором установлен чат. Обязательно передавать вместе с siteUserExternalId, если используется аутентификация через сайт.
По умолчанию null
siteUserExternalIdStringId пользователя на сайте установившем чат.
По умолчанию null
siteUserFullNameStringИмя пользователя на сайте установившем чат. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserAvatarUrlStringUrl аватара пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserProfileUrlStringСсылка на профиль пользователя. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
allowedLoginMethodsArrayМассив возможных методов аутентификации.
По умолчанию ['guest', 'vk', 'tg', 'google', 'fb']
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
По умолчанию []
Права
isStaticBoolВозможность перемещать чат.
По умолчанию false
allowUploadMessagesBoolВозможность обновлять в чате контент: подгружать старые сообщения, добавлять новые.
По умолчанию true
allowSendMessagesBoolВозможность отправлять сообщения. Только при allowUploadMessages = true.
По умолчанию true
allowResizeChatBoolВозможность растягивать чат.
По умолчанию true
allowMinimizeChatBoolВозможность сворачивать чат.
По умолчанию true
Элементы
showChatMenuBoolПоказывать меню чата.
По умолчанию true
menuItemsArrayЭлементы меню. Передайте массив объектов: [ {url, title, iconUrl}, ... ].
По умолчанию null
allowDefaultInviteBoolПоказывать в меню ссылку на присоединение к беседе.
По умолчанию true
showTitleNotificationBoolПоказывать уведомление о новом сообщении в заголовок вкладки браузера.
По умолчанию true
Геометрия
chatStateStringCостояние чата: раскрытый 'maximized' и свернутый 'minimized'.
По умолчанию maximized
chatTopStringКоордината Y левого верхнего угла раскрытого чата. В приоритете перед chatBottom. Для неподвижного чата игнорируется.
По умолчанию null
chatLeftStringКоордината X левого верхнего угла раскрытого чата. В приоритете перед chatRight. Для неподвижного чата игнорируется.
По умолчанию null
chatBottomStringКоордината Y правого нижнего угла раскрытого чата. Для неподвижного чата игнорируется.
По умолчанию 20px
chatRightStringКоордината X правого нижнего угла раскрытого чата. Для неподвижного чата игнорируется.
По умолчанию 20px
chatHeightStringВысота чата.
По умолчанию 250px
chatWidthStringШирина чата.
По умолчанию 100% for static chat and 350px for movable chat
minimizedChatLeftStringКоордината X относительно левого нижнего угла для свернутого чата. Для неподвижного чата игнорируется.
По умолчанию null
minimizedChatRightStringКоордината X относительно правого нижнего угла для свернутого чата. В приоритете перед minimizedChatLeft. Для неподвижного чата игнорируется.
По умолчанию 20px
История.
useStandardHistoryWidgetSettingsBoolСтандартный пресет для истории чата.
По умолчанию false
chatPaginatorUrlPrefixStringПуть к последней странице истории. Пример: https://www.chatbro.com/history. Обязательный параметр для виджета истории.
hideMessagesOverflowBoolПодстраивать ли высоту чата под высоту контента.
По умолчанию true
showChatOuterFrameBoolПоказывать рамку чата. Используется, только когда контент не подгоняется под заданную высоту.
По умолчанию true
batchIdStringНомер страницы истории чата. Используется для отображения истории и пейджинатора.
По умолчанию null

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

Для индексации используется отдельный 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)