Documentation

Chat creation

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

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', '//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

Let's say you need a separate chat for each city. To prevent creation of thousands chats in constructor - generate chat identity chatPath and pass it to ChatbroLoader function which draws the chat. See example below.

Use web constructor or plugin whenever possible. Use chatPath identity only with dynamic chats creation.

chatPath parameter is unique string identity of your chat, consisting of three parts:
<Social network name>/<Administrator id>/<Unique chat name>

  1. Social network name
    Only Telegram and VK available now. It looks like tg and vk inside chatPath.
  2. Administrator id
    Your unique id inside selected social network.
  3. Unique chat name
    Also used as chat window title.

Your chatPath template:

Example:

<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: 'tg/208397015/Ask your own question' }); </script>

Two chats on the page with different configuration parameters:

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

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.

ParameterTypeValue
containerDivIdStringChat container div id. Mandatory parameter for static chat. Can be missed for one movable chat, container will be created automatically.
chatLanguageStringChat interface language: [auto, en, enrtl, ru, pt, fr, fa, es, nl, de, ro, tt, bg, ar]
Default auto
parentEncodedChatIdStringUsed on creating dynamic chat. Created chat will use parent's filter function and parent's parameters.
Chat identificators
chatPathStringUnique chat path: <admin auth type>/<admin id>/<chat name>.
encodedChatIdStringCreated automatically when you create a chat using constructor.
encodedChatGuidStringInteger number encoded by md5 algorithm and used to identify chats.
chatAliasStringShort chat name that you can set in chat constructor.
Appearance
chatHeaderBackgroundColorStringChat background color. CSS format.
Default #2D3341
chatHeaderTextColorStringHeader text color.
Default #FFFFFF
chatBodyBackgroundColorStringMessage block background color.
Default #F7F8FC
chatBodyTextColorStringMessage block text color.
Default #3F4549
chatInputBackgroundColorStringInput block background color.
Default #FFFFFF
chatInputTextColorStringInput block text color.
Default #3f4549
coloredUserNamesBoolEnable or disabled colored usernames.
Default false
Users
siteDomainStringChat domain. Should be passed with siteUserExternalId when site authentication used.
Default null
siteUserExternalIdStringYour site user id.
Default null
siteUserFullNameStringUser name. siteDomain and siteUserExternalId should be passed.
Default null
siteUserAvatarUrlStringUser avatar url. siteDomain and siteUserExternalId should be passed.
Default null
siteUserProfileUrlStringUser profile url. siteDomain and siteUserExternalId should be passed.
Default null
allowedLoginMethodsArrayArray of allowed authentication methods.
Default ['guest', 'vk', 'tg', 'google', 'fb']
customLoginLinkStringAdds an additional authorization method to the login menu.
Default null
signatureStringSpoofing protection. Calculated at server on the basis of the transmitted parameters as md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + permissions + secretKey). You can find your secretKey in chat constructor just enable Spoofing protection.
Parameters siteDomain and secretKey are always necessary. Other can be ignored if you do not use them in the ChabroLoader. Example: https://codepen.io/ChatBro/pen/booKRx?editors=0010
More info
Default null
permissionsArrayAn array of allowed moderation methods. Used only in conjunction with the signature parameter. Possible values are: ban (the ability to ban users), delete (the ability to delete messages). Example: https://codepen.io/ChatBro/pen/booKRx?editors=0010
Default []
Permissions
isStaticBoolFreely movable chat window.
Default false
allowUploadMessagesBoolAbility to update content. Receive new messages and scroll messages.
Default true
allowSendMessagesBoolAbility to send messages. allowUploadMessages should be true.
Default true
allowResizeChatBoolAbility to resize chat.
Default true
allowMinimizeChatBoolAbility to minimize chat.
Default true
allowUploadFileBoolAbility to upload files.
Default true
Elements
showChatMenuBoolShow chat menu.
Default true
showParticipantCountBoolShow participant counter .
Default true
menuItemsArraySet chat menu items. Pass array of objects: [ {url, title, iconUrl}, ... ].
Default null
showTitleNotificationBoolShow new messages notifications in browser tab title.
Default true
chatGreetingStringShow concise message when loading chat.
Default null
Geometry
chatStateStringInitial state: 'maximized' or 'minimized'.
Default maximized
chatTopStringTop-left Y-coordinate of opened chat. Will be used before chatBottom. Ignored if chat is static.
Default null
chatLeftStringTop-left X-coordinate of opened chat. Will be used before chatRight. Ignored if chat is static.
Default null
chatBottomStringBottom-right Y-coordinate of opened chat. Ignored if chat is static.
Default 20px
chatRightStringBottom-right X-coordinate of opened chat. Ignored if chat is static.
Default 20px
chatHeightStringChat height.
Default 250px
chatWidthStringChat width.
Default 100% for static chat and 350px for movable chat
minimizedChatLeftStringX coordinate from the left down corner of closed chat. Ignored if chat is static.
Default null
minimizedChatRightStringX coordinate from the right down corner of closed chat. Will be used before minimizedChatLeft. Ignored if chat is static.
Default 20px
History
useStandardHistoryWidgetSettingsBoolDefault history preset.
Default false
chatPaginatorUrlPrefixStringHistory url prefix. Example: https://www.chatbro.com/history/. Mandatory parameter for history widget.
hideMessagesOverflowBoolAdjust chat height for content.
Default true
showChatOuterFrameBoolDisplay outer widget border. Used only when hideMessagesOverflow = false.
Default true
batchIdStringCurrent history page number. Used for display of history and paginator.
Default null

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

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


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.

Parameters
  • newMessage - object of Message
  • lastMessages - array of lastest 10 Message's objects
  • result - result class with static methods to return different actions
Return statements
  • Accept message

    result.acceptMessage();
    result.acceptMessage("{comment: 'some text'}");

    • comment (String) - info message for user.

  • Decline message

    result.declineMessage("{comment: 'some text'}");

    • comment (String) - warning message for user.

  • Change message

    result.changeMessage(messageObject);
    result.changeMessage(messageObject, "{comment: 'some text'}");

    • comment (String) - info message for user.
    • messageObject (Object) - message object

  • Ban user

    result.banUser("{banDurationMin: 15, reason: 'some reason', banType: 'IP', isShadow: false, comment: 'some text for user'}");

    • banDurationMin (Long) - diration of ban in minutes.
    • reason (String) - reason of ban.
    • isShadow (Boolean) - it's shadow ban or not. Default false.
    • comment (String) - warning message when user will be banned.
    • banType (String) - 2 options: IP - ban by ip; ID - ban by user id. Default IP.

  • Show info message

    result.showInfo("{message: 'some text'}");


  • Show warning message

    result.showWarning("{message: 'some text'}");

Object of Message
  • originalText - message text
  • attachments - attachments in the form of an array
    • 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 - время отправки сообщения

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

When chat is initialized.

newMessage

Fires on new message. Grants access to the message and it's container.

Play message notification sound for not active tab:

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

When chat window open/closed.


See the Pen maximize & minimize by ChatBro (@ChatBro) on CodePen.

chatInputClick

Fires on input click. Use this event to make chat read only for guests. Ask them to sign in on input click.


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

beforeSendMessage

Use this event to filter URLs or work with attachments. Fires before sending message with access to the Message object.

The Message object structire:

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

Have two callbacks:

onSuccess(Message) - Will send the Message object.
onFail(text) - Will alert with the text message.


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

chatbroPtCountChanging

Event fired when changing the number of participants.

See the Pen Get current online by ChatBro (@ChatBro) on CodePen.

CMS

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

Wordpress

Wordpress chat plugin is our flagman and placed on it's own page.

Vbulletin 3.8

Download file en_product-chatbro.xml

To import the file. Log in to vBulletin, go to tab «Products & Hooks» \ «Manage Products» and click «Add/Import Product».

Select downloaded file and click import.

Open options menu and select «ChatBro options».

Update your chat path. Create your chat path in my account.

Vbulletin 4

Download file en_product-chatbro.xml

To import the file. Log in to vBulletin, go to tab «Products & Hooks» \ «Manage Products» and click «Add/Import Product».

Select downloaded file and click import.

Open options menu and select «ChatBro options».

Update your chat path. Create your chat path in my account.

Vbulletin 5

Download file en_chatbro_product.zip

Copy directory «core» from downloaded archive into your vBulletin dir. After that you should see «core/packages/chatbro» in your vBulletin directory.

To import the package. Log in vBulletin, go to «Products & Hooks» \ «Manage Products» and click «Add/Import Product».

Type «./packages/chatbro/xml/product_chatbro.xml» and click import.

Open Options and select «ChatBro options».

Update your chat path. Create chat path in my account.

IP.Board

Go to admin panel, click tab «Look & Feel» and click default theme.

Select globalTemplate in menu and insert chat code before tag </body>. Do not forget to change «chatPath» option.

<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

Log in to the site via FTP and open file /includes/functions.php.

After the line

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

insert code:

$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; }

After the line

'BOARD_URL' => $board_url

insert code:

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

Go to admin panel and select «Styles».

In the left menu select «Templates», select your style and click «Change».

Select template «overall_footer.html» and insert chat code. Do not forget to change «chatPath» option.

<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

Log in to fluxbb site via FTP and open file footer.php (in the root directory).

Insert this code between </div> and <?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>

To create history page, download archive.

Put the file «files/chat_history.php» to the site root dir. At line 37 change chatPath.

Open «header.php» (in the root dir) and after:

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>'; }

add this code:

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

Download file chatbro_sm.zip

Go to the package manager, select chatbro mod and download it.

Select install mod in the opened window.

Click install now.

You'll be forwarded to the mod settings and you should change 'Chat path' parameter.

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

The easiest but not the best way to get rid - to disable the spoofing protection in the chat constructor. Go to Chatbro, "My chats", select the chat, click "edit". In the "authentication" section, clear the "spoofing protection" check box. Check the correctness of the entered parameters to solve the problem.

The minimum set of parameters passed to the function:

md5(siteDomain + secretKey)

Function for example in JavaScript: crypto.createHash('md5').update('localhostd60c97a2-ae7a-47a3-a72f-4a5b645711ec').digest('hex')

The transmission method with additional parameters (some except for the minimum can be omitted, the order is also important):

md5(siteDomain + siteUserExternalId + siteUserFullName + siteUserAvatarUrl + siteUserProfileUrl + permission + secretKey)