On 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 child chats feature.

ChatbroLoader

ChatbroLoader is the name of javascript function that will display chat. Looks like that:

ChatbroLoader({
...
});

The function takes a {} object, which is filled with various parameters. There are required parameters, like а encodedChatId and optional ones. By encodedChatId, we understand which chat needs to be shown to the client. A detailed example of calling the ChatbroLoader function is available in the documentation.

This is how a regular chat is displayed:

ChatbroLoader({
encodedChatId: 'Here will be your chat ID from the chat editor'
});

Specific example:

ChatbroLoader({
encodedChatId: '38Gjv'
});

38Gjv is id of chat we just created for test. You will have your own id. The system will automatically give it when creating a new chat.

You don't need to write anything by hand. It is enough to go to our site, click "Create a chat" and you will be taken to the chat editor. Above, under the button "Embed Code" there will be a ready-made code, which can be simply inserted into your site (in html code) and the chat will appear.

Child chats

Child chat is a chat that uses the settings of another (parent) chat. This is done in order to automate the process of creating your chats.

Let's say you have a hundred products. Each product has its own generated html page. And you need each product to have its own chat, with its own unique correspondence. It is inconvenient to create 100 chats with your hands. It is enough to create one parent chat with your hands, configure it, and then automatically create child chats. They will use the parent's settings and look and act like a parent.

Bans and moderators will be the same for all chats. Having banned user in one chat, he will automatically be banned in all children chats by one parent. Same thing with moderators. Moderator assigned for one chat will become a moderator in all child chats.

How do I create a child chat?

The child chat is displayed in the same way - by calling the ChatbroLoader function, but with different parameters.

Call looks like this:

ChatbroLoader({
parentEncodedChatId: 'parent chat ID',
chatTitle: 'Any_chat_name'
});

Or a concrete example:

ChatbroLoader({
parentEncodedChatId: '38Gjv',
chatTitle: 'First child chat'
});

Available parameters:

  • parentEncodedChatId - Id of parent chat;
  • chatTitle - Unique title that to be used as chat identifier;
  • extId - Optional parameter. If you want to have two or more different chats with equal titles add this parameter. Timestamp is perfect for this.

Keep in mind that you can add other parameters from the table to fine-tune your chat. This will add new settings or overwrite parent settings.

Note that encodedChatId is missing here. Here it is replaced by parentEncodedChatId.

So chat can become a parent, it must meet the conditions:

  • It must has an administrator (for this, when creating a chat you need to log in);
  • It should not be someone else's child;
  • The 'Allow child chats' checkbox should be enabled in the constructor. By default it's off.

On the first request, our server checks the database. If such a child chat already exists, it is returned and displayed. If not, then a new one is created. This will automatically create new chats on the fly. If no child chat is created, the reason will be printed in the browser console. Such chats will use parental settings, namely:

  • Visual settings;
  • Authorization settings;
  • The secret key;
  • Privacy settings;
  • Message filter function;
  • Tariff, balance.

Please note that when you editing any child chat, you are automatically redirected to the parent chat editor (there will be a corresponding notification). Be carefully when set up parent chat: changes will instantly affect all the children.

Practice

Let's try to create a couple of child chats.

  1. First, we need to create one parent chat.
    1. Go to chatbro.com.
    2. Log in in the upper right corner in any way.
    3. Click "Create a chat". We get to the page with the chat editor. This is our new chat. Immediately we notice a large green button "Embed Code" above. You can click on it. It will open exactly that chat request function (ChatbroLoader). As you can see, it already has its own chat ID. If you copy this code and paste it into the html page, then the chat will appear. But we don't need it now.
  2. Let's set up a parent chat.
    1. Now we will customize the chat according to your needs. Chat customization is very flexible.
    2. For this example, we'll just limit ourselves to one visual setting. This is optional, just to show that chats inherit settings. Set any color of the chat frame (Block "Colors").
    3. Find the block on the left named Dynamic creation and in it click Allow child chats. By default, new chats have it disabled for security reasons. Do not forget to save everything. After activation, a new code will appear just below. This is the same function for calling the child chat. Id has already been substituted. Now it is enough to copy and paste this code into the html page and your first child chat will be created.
  3. Everything is ready for use on your site.

Example

ChatbroLoader([{
encodedChatId: '38Gjv',
containerDivId: 'parentChat'
}, {
parentEncodedChatId: '38Gjv',
containerDivId: 'childChat1',
chatTitle: 'First child chat'
}, {
parentEncodedChatId: '38Gjv',
containerDivId: 'childChat2',
chatTitle: 'Second child chat'
}]);