1. Add Website channel to Creatio

1. Go to the System designer > Chat configuration > Channels

2. Press + and choose Website

3. Fill in the standard fields and choose As script checkbox

4. Press GET CODE

5. Press COPY

6. Press ADD

Now you have script for widget on your website:

<link rel="stylesheet" href="https://widget.beesender.com/3.0/widget.css">
<div id="beesender-chat"></div>
<script>    
  window.beesenderchatconfig = {};    
  window.beesenderchatconfig.channelId = '00000000-0000-0000-0000-000000000000';    
  window.beesenderchatconfig.connectorUrl = 'https://balance.beesender.com';
</script>
<script src="https://widget.beesender.com/3.0/widget.js" async></script>
<script src="https://widget.beesender.com/3.0/chunk-vendors.js" async></script>

2. Widget setup

There are several pre-configured scripts in which you need to replace window.beesenderchatconfig.channelId and insert the resulting script into the page code.

2.1 Widget without additional channels 

It is necessary to replace window.beesenderchatconfig.title (5) and the channel Id (4) from the code generated in Creatio

<link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css">
<div id="beesender-chat"></div>
<script>window.beesenderchatconfig = {};
  window.beesenderchatconfig.channelId = '0b5190ec-4ea4-4335-991e-1e2163760443';
  window.beesenderchatconfig.title = "Beesender";
  window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png";
  window.beesenderchatconfig.connectorUrl = 'https://connector.beesender.com';
</script>
<script src="https://widget.beesender.com/3.0/widget.js" async></script>
<script src="https://widget.beesender.com/3.0/chunk-vendors.js" async></script>

2.2 Widget with additional channels 

1. To add widget with additional channels you need to add a few lines to the standard script

window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.showChannelPanel = true;
window.beesenderchatconfig.channelsInPanel =
[
{ type : "fb", name : "Facebook", link : "https://www.facebook.com/Beesender-1943326189302470/?modal=admin_todo_tour" },
{ type : "fbm", name : "Facebook Messenger", link : "https://www.facebook.com/messages/t/1943326189302470" },
{ type: "instagram", name : "Instagram", link : "https://www.instagram.com/beesender/" },
{ type : "telegram", name : "Telegram", link : "https://t.me/DiverTestBot" },
{ type : "viber", name : "Viber", link : "viber://pa?chatURI=uri5element" },
{ type : "skype", name : "Skype", link : "https://join.skype.com/bot/cf865d6e-e37f-4a05-a260-6e8b0a657104?add" },
{ type : "twitter", name : "Twitter", link : "https://twitter.com/Beesender5" },
{ type : "whatsapp", name : "WhatsApp", link : "https://wa.me/79636129154" },
{ type : "widget", name : "Continue on this website" },
];

2. Leave only lines with channels that are connected to the system.

3. Complete script with channels selections looks like this:

<link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css">
<div id="beesender-chat"></div>
<script>
window.beesenderchatconfig = {};
window.beesenderchatconfig.channelId = '0b5190ec-4ea4-4335-991e-1e2163760443';
window.beesenderchatconfig.connectorUrl = 'https://connector.beesender.com';
window.beesenderchatconfig.title = "Beesender";
window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png";
window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.chatMessagePlaceholder ="Enter message...";
window.beesenderchatconfig.closeChatCaption = "Close chat";
window.beesenderchatconfig.chatButtonsPlaceholder = 'Please select one of the following options';
window.beesenderchatconfig.initialMessageText = "A client opened the webchat";
window.beesenderchatconfig.channelPanelHeader = 'Choose a channel to continue your communication ';
window.beesenderchatconfig.backToChannelChooseCaption = 'Back to the list of channels';
window.beesenderchatconfig.showChannelPanel = true;
window.beesenderchatconfig.channelsInPanel =
[
{ type : "fb", name : "Facebook", link : "https://www.facebook.com/Beesender-1943326189302470/?modal=admin_todo_tour" },
{ type : "fbm", name : "Facebook Messenger", link : "https://www.facebook.com/messages/t/1943326189302470" },
{ type: "instagram", name : "Instagram", link : "https://www.instagram.com/beesender/" },
{ type : "telegram", name : "Telegram", link : "https://t.me/DiverTestBot" },
{ type : "skype", name : "Skype", link : "https://join.skype.com/bot/cf865d6e-e37f-4a05-a260-6e8b0a657104?add" },
{ type : "twitter", name : "Twitter", link : "https://twitter.com/Beesender5" },
{ type : "whatsapp", name : "WhatsApp", link : "https://wa.me/79636129154" },
{ type : "widget", name : "Continue on this website" },
];
</script>
<script src="https://widget.beesender.com/prod/widget.js" async></script>
<script src="https://widget.beesender.com/prod/chunk-vendors.js" async></script>

3. Widget appearance customization

3.1 Widget button color

To change the color of the widget button add the following line to the script generated in Creatio:

window.beesenderchatconfig.widgetButtonColor = "#ff8c00"

to the script generated in Creatio.

Change the colour in the quotation marks to the one you need.

Before	After

3.2 The color of the widget's button internal element

To change the color of the widget's button internal element add the following line to the script generated in Creatio:

window.beesenderchatconfig.widgetButtonColorLine = "#ffffff"

Change the colour in the quotation marks to the one you need.

Before	After

3.3 Widget button ripple color

To change the widget button ripple color add the following line to the script generated in Creatio:

<style>
.beesender-widget-button-pulse-animate {
background-color: #e91e63 !important;
}
</style>

Change  #e91e63 to the colour you need.

3.4 Widget button picture

To replace the main widget button you need to add the following line (containing a link to the .svg image file of the desired widget button) to the script generated in Creatio:

window.beesenderchatconfig.startButtonSvg = "https://pictures.beesender.com/startbtnbeesender_7.svg";

The default value:

4. Dialog window display settings

Dialog window display settings

4.1 Header color changing

To change the color of the widget header you need (2 methods)::

a) add the style:

#beesenderchat-container .beesenderchat-conversation-body-profile {
background: #4d1965 !important;
}

Change the colour in the quotation marks to the one you need.

b) add the line to the script:

window.beesenderchatconfig.themeColor = "#ffcb05"  

The default value: "#ffcb05”

The parameter contains a hexadecimal color code that is responsible for the main color palette of the widget.

4.2 Changing operator's photo in replicas

To change operator's photo in replicas you need to add the following line to the script:

window.beesenderchatconfig.operatorAvatar = "https://pictures.beesender.com/0/Localiser-300x300.png";

Change link in the quotation marks to the one you need.

4.3 Changing the logo in the widget header

To change the photo in the widget header you need to add the line to the script:

window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png";

Change link in the quotation marks to the one you need.

4.4 Modify the first statement replica (welcomeMessage)

The parameter may contain a header message, which will be displayed as the first message in the widget chat.

The header message is not an ordinary message. It is not passed to the Creatio operator and is visible only on the client side in the widget.

Use case: ask the client to wait while the operator / chat bot answers him. A message may contain buttons. By default, there is no header message.

To add it, initialize the parameter with an object, as indicated in the example. If no buttons are needed, then initialize only the text attribute.

window.beesenderchatconfig.welcomeMessage = {
text: "The operator will answer soon! Please wait!",
buttons: ["Ok", "Not ok"]
};

4.5 Color and background of a system message with an operator name changing

4.5.1 Changing the background of a system message with an operator name

To replace the background in the styles add:

.beesenderchat-operatorinfo-message {
background-color: #ff6161!important;
}

Insert color you need instead of #ffffff .

Before	After

4.5.2 Changing the text color of a system message with an operator name

To replace the text color in styles add:

.beesenderchat-operatorinfo-message-phrase {
color: #ffffff !important;
}

Insert color you need instead of #ffffff .

Before	After

4.6 Chat Close System Message changing

To display a system message about closing a chat, you must activate the BeesenderSendCloseNotification system setting. The message text can be changed in the BeesenderCloseChatMessageText system setting.

4.6.1 Background color Close System Message changing

To replace the background in the styles add:

.beesenderchat-notification-message-phrase {
background: #ff6161 !important;
}

Insert color you need instead of #ff6161.

Before	After

4.6.2 Text color Close System Message changing

To replace the text color in styles add:

.beesenderchat-notification-message-phrase {
color: #ffffff !important;
}

Insert color you need instead of #ff6161.

Before	After

4.7 Message appearance customization

Area color around messages

To replace the area around messages in styles add:

.beesenderchat-comment
{background: #999999 !important;
}

Insert color you need instead of #999999

Before	After

4.7.1 Text color of the operator messages

To replace the color of the operator messages text in the styles, add:

.beesenderchat-comment-container-admin p.beesenderchat- {
color: #000 !important;
}

Insert color you need instead of #000

Before	After

4.7.2 Background color of the operator messages

To replace the background of operator messages in styles, add:

.beesenderchat-comment-container-admin p.beesenderchat- {
background: #fff !important;
}

Insert color you need instead of #fff

Before	After

4.7.3 Text color of client messages

To replace the color of the text of client messages in the styles, add:

.beesenderchat-comment-container-user p.beesenderchat- {
color: #000 !important;
}

Insert color you need instead of #000

Before	After

4.7.4 Background color of client messages

To replace the background of client messages in the styles add:

.beesenderchat-comment-container-user p.beesenderchat- {
background: #fff !important;
}

Insert color you need instead of #fff

Before	After

4.8 Change the color of the message sending time

To replace the color of the time of sending messages to the styles add:

.beesender-msg-time {
color: #000 !important;
}

Insert color you need instead of #000

Before	After

4.9 Changing the color and transparency of the widget background

To replace the color and transparency of the widget background you need to add to the styles:

div#beesenderchat-main-feed {
background-color: rgba(203,210,234,.86) !important;
}

Instead of rgba(203,210,234,.86) insert the desired color and transparency.

To replace the color and transparency of the widget background on a certain screen size (or when opening the widget from mobile devices, opening DevTools)

you need to add to the styles:

@media screen and (max-width: 980px)
{
div#beesenderchat-main-feed {
background-color: rgba(203,210,234,.86) !important;
}}

Before	After

4.10 Widget title changing

The default value is "Beesender"

To change the title in the widget header, you need to add to the script:

window.beesenderchatconfig.title = "New Title";

Insert text you need instead of New Title(company name)

Before	After

4.11 Subtitle changing

The default value is " "

To add or change the subtitle in the widget header, you need to add to the script:

window.beesenderchatconfig.subtitle = "My Subtitle";

Insert text you need instead of My Subtitle

Before	After

4.12 Placeholder text of an input field changing

The default value is 'Enter a message ...'

The parameter contains a placeholder for the input field where you want to enter a text message. To change the placeholder text you need to add to the script:

window.beesenderchatconfig.chatMessagePlaceholder = "Enter a message ...";

Insert text you need instead of Enter a message ...

Before	After

4.13 Description text in the footer of the widget changing

The default value is Chats and Chatbots

To change the description text which is in the footer of the widget you need to add to the script:

window.beesenderchatconfig.footerTitle = "Chatbots"

Insert text you need instead of Chats and Chatbots

Before	After

4.14 Changing of the link to the resource in the widget footer

4.14.1 Changing the footer title name

The default value is Beesender

To change the footer title name you need to add to the script:

window.beesenderchatconfig.footerTitleName = "New text"

Insert text you need instead of Beesender

Before	After

4.14.2 Changing the footer link to the resource

To change the link to the resource in the widget footer you need to add to the script:

window.beesenderchatconfig.footerTitleName = "http://beesender.com/"

Change link in the quotation marks to the one you need.

The default value is – "Beesender "

4.15 Changing the status of successful file upload from the widget

The default value is Loaded

The parameter is responsible for the user display of the file sending status on the widget, if the file was successfully sent. To change the user display of successful file upload from the widget, you need to add the line to the script:

window.beesenderchatconfig.successFileUploadString = "Successfully <br> loaded"

Insert text you need instead of Loaded

Before	After

4.16 Changing the image icon when a user uploads a file

The default value is “https://widget.beesender.com/src/download.svg"

The parameter is responsible for the link of the image icon that is rendered when the user sends the file. To change the icon you need to add to the script:

window.beesenderchatconfig.beesenderDownloadIcon = "https://widget.beesender.com/src/download.svg"

Change link in the quotation marks to the one you need

Before	After

4.17 Changing the text of the message with the name and avatar of the operator at the time of his connection to the chat

The default value is "Your agent is {0}"

The parameter is responsible for the text of the message with the name and avatar of the operator, at the time of its connection to the chat (this functionality can be enabled in the crm-system in the widget channel settings). To change the text of the message you need to add the line to the script:

window.beesenderchatconfig.operatorInfoMessage = "Your agent is {0}"

{0} - an internal parameter that will be replaced with the operator's nickname.

Insert text you need instead of Your agent is {0}

4.18 Changing the "Attach File" icon

The default value is "https://widget.beesender.com/src/upload-button.png"

To change the link to the “Attach file” image icon, you need to add the line to the script:

window.beesenderchatconfig.attachFileButton = "https://widget.beesender.com/src/upload-button.png"

Change link in the quotation marks to the one you need

4.19 Changing the Emoji Icon

The default value is "https://widget.beesender.com/src/smile.png"

To change the link to the “Emoji” icon in the widget footer, you need to add to the script:

window.beesenderchatconfig.emojiIcon = "https://widget.beesender.com/src/smile.png"

Change link in the quotation marks to the one you need

4.20 Changing the error status of sending a file from a widget

The default value is Send error

The parameter is responsible for the user display of the file sending status on the widget in case the file could not be sent. To change the user display of error status of sending a file you need to add to the script:

window.beesenderchatconfig.errorFileUploadString = "Error loading"

Insert text you need instead of Error loading

Before	After

4.21 Changing the text and background color of buttons

4.21.1 Button text color changing

To replace the text color of buttons you need to add to styles:

button.beesenderchat-bot-button {
color: #000 !important;
}

Insert color you need instead of #000

Before	After

4.21.1 Button background color changing

To replace the background color you need to add to styles:

button.beesenderchat-bot-button {
background: #999999 !important;
}

Insert color you need instead of #999999

Before	After

4.22 Changing the placeholder text for the input field before clicking the button

The default value is 'Please select one of the following options'.

The parameter contains a placeholder for the input field when you want to click on the button in the message. To change the placeholder text you need to add to the script:

window.beesenderchatconfig.chatButtonsPlaceholder = "Choose one of the options";

Insert text you need instead of Choose one of the options

Before	After

Other settings

There is a complete list of custom settings for the widget (window.beesenderchatconfig) below:

5.1 Opening timer option

For the widget to open automatically you need to insert a script at the end of <body>, replacing the number 5000 with the desired number of milliseconds:

<script>
$(document).ready(function() {
  setTimeout(function() {
    $("#beesenderchat-widget-startbutton").trigger('click');
  }, 5000);
});
</script>

5.2 Linking a widget to a channel

The parameter is required! This parameter is necessary to bind the widget to the channel on Creatio. It is generated automatically when you create a channel.

If the channel is connected as a script, then the default setting is present in the script text.

If you add a channel as a vue component, you need to add a line to the page code.

window.beesenderchatconfig.channelId = “Your channelId”;

5.3 Transfer of site client ID

The default value is ""

The parameter is used to transmit the site user ID. The format and method of generation is choosen by the developers. In the future, this identifier can be used at your discretion, for example, in the chatbot business process. To transfer the site client ID you need to add to the script:

window.beesenderchatconfig.clientId = “Your identifier”;

5.4 Connector Url changing

The default value is "https://balance.beesender.com"

The parameter contains the address of the connector with which the widget establishes a connection using the WS protocol. When expanding the On Site connector, you must specify its address in this parameter. It is not recommended to change if the connector is not deployed in On Site mode.

window.beesenderchatconfig.connectorUrl = "https://connector.beesender.com";

Insert text you need instead of https://connector.beesender.com

5.5 Locking an input field during a message with buttons

The default value is true

The parameter determines whether the field for entering a message will be blocked when a message with buttons arrives.

This is necessary in order to prevent the user from entering text when you need to click on one of the buttons.

Set to false to disable the lock.

window.beesenderchatconfig.disableInputOnButtonMessages = false;

5.6 Changing and disabling the first message from the client when opening the widget

5.6.1 Sending the first message when the client opens the widget

The default value is true

The parameter determines whether the message will be sent on behalf of the client to Creatio when the client clicks on the button to open the widget.

The message text is determined by the initialMessageText parameter. A message is sent only once. If the client opens and closes the widget many times, the message will be sent only once.

The message remains invisible in the widget chat, but is displayed in the Creatio chat. To disable sending this message, set to false.

window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClick = false;

5.6.2 Changing the text of the first message when the client opens the widget

The default value is "Client opened widget"

The parameter contains the text of the message, which is sent automatically when you click the button to open the widget.

window.beesenderchatconfig.initialMessageText = "A new message when the client opened the widget!";

Before	After

5.7 Storage time for chat history in the widget

The default value is 30

The parameter determines the storage time of the correspondence history in the widget in minutes.

After the specified time has elapsed, the history will be deleted, and an attempt to send a message will create a new chat in Creatio. To change the local storage life time you need to add to the script:

window.beesenderchatconfig.localStorageLifeTime = 100;

5.8 Changing the message time format

The default value is

function (timestamp) {
var date = new Date (timestamp);
return `$ {date.getHours ()}: $ {(date.getMinutes () <10)? "0" +
date.getMinutes (): date.getMinutes ()} `;
}

The parameter contains a function that takes the number of milliseconds and returns a string of time. Used to indicate the time format of messages.

Use your implementation to change the time format.

window.beesenderchatconfig.timeFormatFuntion = function (timestamp) {your code};

5.9 Ability to send files from the widget

The default value is true

The parameter is responsible for the ability to send files from the widget.

window.beesenderchatconfig.enableFileUpload = true

5.10 The file server changing

The default value is "https://files.beesender.com"

The parameter contains a link to a file server developed by the Beesender team, which converts all files sent from the widget to links. To change the file server you need to add to the script:

window.beesenderchatconfig.fileServerUrl = "https://files.beesender.com"

Change link in the quotation marks to the one you need

5.11 User tracking mode while typing

The default value is false

The parameter is responsible for enabling the "user tracking" mode while the user is typing. To enable User tracking mode you need to add to the script:

window.beesenderchatconfig.isClientTyping = false