Documentation

Chat creation

Use web constructor to easily create and configure chat. Use existing plugin: WordPressOpencartJoomlaDrupal

To make chat appear on your site copy javascript code from constructor to your site html head element. It's enough to put it once. Site chat will be updated automatically on constructor settings change.

Chat's embed code

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

On-the-fly creation

For example you want different chats for different pages of your site. In case you have video hosting site you can make different chat for each video. Generate these chats on the fly using the dynamic chats feature. Check out detailed explanation.

Synchronization

• Custom VK Bot.
• Custom Telegram Bot.
• Automatic synchronization with telegram.

Parameters

Parameters passed to ChatbroLoader function overrides web constructor settings from database.

There are three main chooses:

• Static Inserted into static div on the page.
• Movable It is resizable and movable. You can create div container anywhere on the page.
• History The same as static, embedded in static div. History divided on the pages which will be indexed by search robots.

History indexing

There is specially customized chat widget with paginator for history.

Choose url for history widget. For example:  http://www.chatbro.com/43eM/history

Insert chat here with the history preset option (useStandardHistoryWidgetSettings = true).

You should pass this url as chat parameter chatPaginatorUrlPrefix It will be used in the paginator. Paginator will be available only, if live update disabled (allowUploadMessages = false).

When walking throw history pages, page number will be added to url. It should be passed as batchId parameter.

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

Single Sign-On

The user, having gone the authentication procedure on your site, logs in to the chat. The chat will use the same nickname and avatar as on the site. A link to user profile will also be available. Example implementation.

Message filtering

To avoid unwanted messages, you can enable message filtering on the server side. You can do this in the chat constructor, in the "Administration" section. The filter function use JavaScript. Return statement use a Java object with static methods that return various actions (for example accept, change or decline message and other).

The simplest filter function looks like this:

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

It just accept user's message without any checks.

Events

Please set events listeners after chat initialization on chatLoaded event. Event should be set on document.

Example:

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

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();
        }
    });
});

{
    text: '', - Text of the message
    attachments: [
        {
            type: 'photo/video', - attachment type
            thumbnailPhotoUrl: '', - image preview url
            originalPhotoUrl: '', - image url
            playerUrl: '' - Attachment url. Only when type = video
        }
        ...
    ],
    links: [
        {
            host: '', - url host
            protocol: '', - url protocol
            url: '' - original url
        }
        ...
    ]
}

CMS

Plugins implement transparent authenctication for CMS users. Spoofing protection. History pages for search engines. Easy installation and configuration.

Incorrect signature

Signature is a unique string generated on the user's server based on the parameters passed to the ChatbroLoader function. The signature is compared on the server ChatBro, providing protection of the chat from substitution of users and not allowing copying to the other websites. If spam protection is enabled, the chat will only work if the signature is calculated correctly and the site's domain corresponds to the one transmitted.
More about spoofing 

How to fix?

We have made a separate page that will help you understand how to do everything correctly.