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

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

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

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

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

Допустим, вам нужен отдельный чат для каждого города. Чтобы не создавать тысячи чатов городов в конструкторе, генерируйте идентификатор чата 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 = async !== false; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], needLoadCode: typeof Chatbro === 'undefined' }; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onload = function () { eval(xhr.responseText); }; xhr.onerror = function () { console.error('Chatbro loading error'); }; xhr.open('POST', '//www.chatbro.com/embed_chats/', async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('parameters=' + encodeURIComponent(JSON.stringify(params))); } /* Chatbro Widget Embed Code End */ ChatbroLoader({ chatPath: 'vk/ddosoff/Тестовая беседа' }); </script>

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

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

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

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

Чат может быть трех типов:

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

ПараметрТипЗначение
chatPathStringИдентификатор чата в формате: <название соц.сети>/<id владельца чата в соц.сети>/<название чата>.
encodedChatIdStringUnique chat identificator. Created automatically when you create a chat using constructor
parentEncodedChatIdStringUse on creating dynamic chat. Created chat will use parent filter function.
containerDivIdStringId контейнера, в который будет встроен чат. При встраивании одного перемещаемого чата, параметр можно опустить - создастся автоматически.
chatLanguageStringЯзык интерфейса чата: [en, ru]
По умолчанию ru
Внешний вид
chatHeaderBackgroundColorStringЦвет чата, в любом формате.
По умолчанию #2D3341
chatHeaderTextColorStringЦвет текста шапки чата.
По умолчанию #FFFFFF
chatBodyBackgroundColorStringЦвет фона блока с сообщениями.
По умолчанию #F7F8FC
chatBodyTextColorStringЦвет текста блока с сообщениями.
По умолчанию #3F4549
chatInputBackgroundColorStringЦвет фона блоков отправки и участников.
По умолчанию #FFFFFF
chatInputTextColorStringЦвет текста блоков отправки и участников.
По умолчанию #3f4549
Пользователи
siteDomainStringДомен, на котором установлен чат. Обязательно передавать вместе с siteUserExternalId, если используется аутентификация через сайт.
По умолчанию null
siteUserExternalIdStringId пользователя на сайте установившем чат.
По умолчанию null
siteUserFullNameStringИмя пользователя на сайте установившем чат. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
siteUserAvatarUrlStringUrl аватара пользователя на сайте установившем чат. Только при переданных siteDomain и siteUserExternalId.
По умолчанию случайное изображение
siteUserProfileUrlStringСсылка на профиль пользователя на сайте установившем чат. Только при переданных siteDomain и siteUserExternalId.
По умолчанию null
allowedLoginMethodsArrayМассив возможных методов аутентификации.
По умолчанию ['guest', 'vk', 'tg', 'google', 'fb']
signatureStringЗащита от подмены имени, вычисляется на сервере как md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + secretKey). Вы можете найти ваш secretKey в разделе «Мои чаты».
По умолчанию null
Права
isStaticBoolВозможность перемещать чат.
По умолчанию false
allowUploadMessagesBoolВозможность обновлять в чате контент: подгружать старые сообщения, добавлять новые.
По умолчанию true
allowSendMessagesBoolВозможность отправлять сообщения. Только при allowUploadMessages = true.
По умолчанию true
allowResizeChatBoolВозможность растягивать чат.
По умолчанию true
allowMinimizeChatBoolВозможность сворачивать чат.
По умолчанию true
Элементы
showChatMenuBoolПоказывать меню чата.
По умолчанию true
menuItemsArrayЭлементы меню. Передайте массив объектов: [ {url, title, iconUrl}, ... ].
По умолчанию null
allowDefaultInviteBoolПоказывать в меню ссылку на присоединение к беседе.
По умолчанию true
showChatParticipantsBoolПоказывать участников беседы в социальной сети
По умолчанию false
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 функцию для обработки сообщений на стороне сервера. Предотвратите дублирование, плохие слова. Изменяйте партнерские ссылки и так далее. Предупредите или забаньте автора сообщения автоматически.

Задать функцию можно в конструкторе в разделе администрирование. Там же есть полезные примеры.

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

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

  • filter - предопределенное имя функции постобработки
  • lastMessages - массив из 10 последних сообщений
  • newMessage - объект сообщения
  • result - объект со статическими методами возвращающими различные действия

События

События позволяют делать с чатом практически любые штуки. Например, фильтровать ссылки. Все обработчики событий определяются только после инициализации чата (сработает событие 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), который пользователь хочет отправить.

{
    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.

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 = async || true; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], needLoadCode: typeof Chatbro === "undefined" }; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onload = function () { eval(xhr.responseText); }; xhr.onerror = function () { console.error("Chatbro loading error"); }; xhr.open("POST", "//www.chatbro.com/embed_chats", async); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("parameters=" + encodeURIComponent(JSON.stringify(params))); } /* 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 = async || true; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], needLoadCode: typeof Chatbro === "undefined" }; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onload = function () { eval(xhr.responseText); }; xhr.onerror = function () { console.error("Chatbro loading error"); }; xhr.open("POST", "http://www.chatbro.com/embed_chats", async); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("parameters=" + encodeURIComponent(JSON.stringify(params))); } /* 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 = async || true; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], needLoadCode: typeof Chatbro === "undefined" }; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onload = function () { eval(xhr.responseText); }; xhr.onerror = function () { console.error("Chatbro loading error"); }; xhr.open("POST", "http://www.chatbro.com/embed_chats", async); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("parameters=" + encodeURIComponent(JSON.stringify(params))); } /* 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 = async !== false; var params = { embedChatsParameters: chats instanceof Array ? chats : [chats], needLoadCode: typeof Chatbro === 'undefined' }; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onload = function() { eval(xhr.responseText); }; xhr.onerror = function() { console.error('Chatbro loading error'); }; xhr.open('POST', '//www.chatbro.com/embed_chats/', async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('parameters=' + encodeURIComponent(JSON.stringify(params))); } 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>.