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>

Widget appearance customization

Widget color

Widget button color

To do this, add the line:

window.beesenderchatconfig.widgetButtonColor = "# ff8c00"

to the script generated in Creatio.

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

Before	After

The color of the widget's button internal element

To do this, add the line:

window.beesenderchatconfig.widgetButtonColorLine = "#ffffff"

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

Before	After

Widget button ripple color

To do this, add styles:

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

Change  #e91e63 to the colour you need.

Before	After

Widget header color

Add the style:

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

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

Changing operator's photo in replicas

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

Opening timer option

Insert a script at the end of <body>, replacing the number 5000 with the desired number of milliseconds, after which the widget will open automatically:

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

Modify the first statement replica

Change text in the quotation marks to the one you need and insert line into the script.

window.beesenderchatconfig.welcomeMessage = { 
      text: "Agent will contact you soon"
     };

System message appearance customization

Changing 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

To replace the text color in styles add:

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

Insert color you need instead of #ffffff .

Before	After

Chat Close System Message

Background color

To replace the background in the styles add:

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

Insert color you need instead of #ff6161.

Before	After

Text color

To replace the text color in styles add:

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

Insert color you need instead of #ff6161.

Before	After

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

Operator messages

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

Background color of 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

Client messages

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

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

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

Spell-checking option

You can install the spell-checking option in the browser.

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

channelId : Guid

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

clientId : String

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.

window.beesenderchatconfig.clientId = “Your identifier”;

connectorUrl : String

The default value is "https://connector.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";

 title : String

The default value is "Beesender"

The parameter contains the widget title.

window.beesenderchatconfig.title = "New Title";

subtitle : String

The default value is ""

The parameter must be specified in order to add a subtitle.

window.beesenderchatconfig.subtitle = "My Subtitle";

chatMessagePlaceholder : String

The default value is 'Type a message and press Enter' The parameter contains a placeholder for the input field where you want to enter a text message.

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

chatButtonsPlaceholder : String

The default value is 'Choose one of the proposed options' The parameter contains a placeholder for the input field when you want to click on the button in the message.

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

disableInputOnButtonMessages : Boolean

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;

sendInitialMessageOnWidgetButtonClick: Boolean

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;

initialMessageText : String

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!";

welcomeMessage : Object

The default value is null

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"]
};

timeFormatFuntion : Function

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

localStorageLifeTime : Number

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.

window.beesenderchatconfig.localStorageLifeTime = 100;

footerTitle : String

The default value is Chats and Chatbots

The parameter contains the description text which is in the footer of the widget

window.beesenderchatconfig.footerTitle = "Chats and Chatbots"

footerLink : String

The default value is "http://beesender.com" The parameter contains a link to the resource to which the redirect will be carried out, after clicking on the header text which is in the footer of the widget

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

themeColor : String

The default value is "# ffcb05" The parameter contains a hexadecimal color code, which is responsible for the main color palette of the widget.

window.beesenderchatconfig.themeColor = "# ffcb05"

enableFileUpload : Boolean

The default value is true

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

window.beesenderchatconfig.enableFileUpload = true

fileServerUrl : String

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.

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

errorFileUploadString : String

The default value is 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.

window.beesenderchatconfig.errorFileUploadString = "Error"

successFileUploadString : String

The default value is Downloaded

The parameter is responsible for the user display of the file sending status on the widget, if the file was successfully sent.

window.beesenderchatconfig.successFileUploadString = "Loaded"

beesenderDownloadIcon : String

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.

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

isClientTyping : Boolean

The default value is false

The parameter is responsible for enabling the "user tracking" mode while the user is typing

window.beesenderchatconfig.isClientTyping = false

operatorInfoMessage : String

The default value is "{0} is talking to you." 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). {0} - an internal parameter that will be replaced with the operator's nickname.

window.beesenderchatconfig.operatorInfoMessage = "{0} is talking to you"