Канал Виджет для сайта (WebSite)

Средний

Скачать

Добавление канала в BPMSoft

Для того чтобы добавить канал в BPMSoft:

Перейдите в раздел «Настройка чатов BPMSoft OCC» в «Дизайнере системы».

Рисунок 1 — Раздел «Настройка чатов BPMSoft OCC»

Нажмите на детали «Каналы» страницы раздела «Настройка чатов BPMSoft OCC», чтобы добавить новый канал.

Рисунок 2 — Деталь «Каналы»

В открывшемся окне, выберите канал «Виджет для сайта».

Домен не должен содержать «/» и «http://», а также должен быть уникальным для каждого вебсайта.

Если на одном веб-сайте используется несколько виджетов (на разные страницы), то названия этих страниц указываются до домена. Например, test.bpmsoftocc.com это страница bpmsoftocc/test.

Обратите внимание на то, что нельзя создать несколько каналов типа «WebSite» с одинаковым доменом. Если будет создан новый канал, использующий тот же домен, старый канал автоматически перестанет работать.

Кнопки «Получить скрипт» (Рисунок 4) и «Копировать» (Рисунок 5) используются для того, чтобы получить скрипт виджета, который необходимо вставить на сайт клиента:

Рисунок 4 — Страница «Добавление канала Сайт», кнопка «Получить скрипт»

Рисунок 5 — Страница «Добавление канала Сайт», кнопка «Копировать»

Добавление виджета

Примечание. Выбор версии возможен только в настройках на сайте.

Ниже представлен код, который был сгенерирован для виджета. Вам необходимо вставить данный код на страницу и заменить слово «Title» в настройках на сайте на название компании или любой другой заголовок, который будет отражаться в виджете.

				 Пример получения UserConnection
			

			 <link rel="stylesheet" href="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/widget.css">
<div id="bpmsoftocc-chat"></div>
<script>
	window.bpmsoftoccconfig = {};
	window.bpmsoftoccconfig.channelId = '5f0b2f7b-8ca2-47fe-88eb-312bd3dc641a';
</script>
<script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/widget.js" async></script>
<script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/chunk-vendors.js" async></script>
		

 
	

Кастомизация виджета

Виджет без дополнительных каналов

Необходимо заменить window.bpmsoftoccconfig.title (название компании) и ID из сгенерированного в BPMSoft кода. С полным списком настроек для виджета вы можете ознакомиться в разделе Полный перечень настроек.

			 <link rel="stylesheet" href="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/widget.css">
<div id="bpmsoftocc-chat"></div>
<script>
	window.bpmsoftoccconfig = {};
	window.bpmsoftoccconfig.channelId = '5f0b2f7b-8ca2-47fe-88eb-312bd3dc641a';
</script>
<script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/widget.js" async></script>
<script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.1/chunk-vendors.js" async></script>
		

 
	

Виджет с возможностью выбора каналов

Рисунок 6 — Виджет

Для настройки виджета с возможностью выбора каналов добавьте в стандартный скрипт, представленный выше, дополнительные строки:

			 <script> 
	window.bpmsoftoccconfig = {};
	window.bpmsoftoccconfig.title = "Dev7";
	window.bpmsoftoccconfig.channelId = 'ChannelId'; // генерируется при создании канала в CRM
	window.bpmsoftoccconfig.connectorUrl =  'https://connector.ai.bpmsoft.ru'; // адрес коннектора
	window.bpmsoftoccconfig.srcUrl = 'https://widget.ai.bpmsoft.ru/src'; // адрес виджета для IIS
	window.bpmsoftoccconfig.showChannelPanel = true; 
	window.bpmsoftoccconfig.menuButtonIcon = 'https://widget.ai.bpmsoft.ru/src/More.png';

	// Настройки надписей для виджета. Локализировать при необходимости
	window.bpmsoftoccconfig.chatMessagePlaceholder ="Enter message..."; 
	window.bpmsoftoccconfig.closeChatCaption = "Close chat"; 
	window.bpmsoftoccconfig.chatButtonsPlaceholder = 'Please select one of the following options'; 
	window.bpmsoftoccconfig.initialMessageText = "A client opened the webchat"; 
	window.bpmsoftoccconfig.channelPanelHeader = 'Choose a channel to continue your communication '; 
	window.bpmsoftoccconfig.backToChannelChooseCaption = 'Back to the list of channels';

	// Список каналов на выбор. В поле link введите URL для перенаправления, а также можете локализировать при необходимости:
	window.bpmsoftoccconfig.channelsInPanel =  [
		{ type : "widget", name : "Continue on this website" },
		{ type : "telegram", name : "Telegram", link : "" },
		{ type : "whatsapp", name : "WhatsApp", link : "" },
	]; 
</script>
		

 
	

Работа с параметром clientId

Параметр clientId используется для идентификации конкретного клиента, то есть пользователя, написавшего в чат.

По умолчанию идентификатор клиента формируется как строка, состоящая из букв латинского алфавита, цифр и символа нижнего подчеркивания (_). Примеры идентификаторов: CZj0vIXT2fmT_4kEyfDmUw, WFfu3kXZJHiPbyYVnNEOnA.

Учитывайте, что через 50 минут сессия клиента завершается, и идентификатор может измениться. За длительность хранения отвечает параметр window.bpmsoftoccconfig.cookieSessionTime, значение которого задается в миллисекундах.

В параметр clientId на стороне виджета можно задать значение с помощью настройки window.bpmsoftoccconfig.clientId. В качестве значения можно использовать любую строку. Логику заполнения clientId можно настроить в соответствии с вашими требованиями. Для канала «Виджет» необходимо сгенерировать код для вставки на страницу, затем при инициализации виджета заполнить его настройки и передать желаемое значение clientId в Cookie. Пример такой настройки виджета приведен ниже:

			 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Виджет для демонстрации примера работы с clientId</title>
</head>
<body>
    <link rel="stylesheet" href="https://bpmsoft-oc-widget1.corporate-domain.ru/3.2/widget.css">
    <div id="bpmsoftocc-chat"></div>
    <h1>Виджет для демонстрации примера работы с clientId</h1>
    <script>
        window.bpmsoftoccconfig = {};
        window.bpmsoftoccconfig.clientId = 'clientId-example-123-4321_ABCDEF';
        window.bpmsoftoccconfig.channelId = 'a831d584-d557-4448-8bc6-761c2785c53b';
        /* Простой пример инициализации cookie. Ключом служит строка "bpmsoftocc:{идентификатор-канала}",  а значением желаемый clientId
        */
        document.cookie = `bpmsoftocc:${window.bpmsoftoccconfig.channelId.toUpperCase()}=${window.bpmsoftoccconfig.clientId}`;
        window.bpmsoftoccconfig.connectorUrl = 'https://connector.example.com';
        window.bpmsoftoccconfig.fileServerUrl = 'https://fileservice.example.com';
    </script>
    <script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.2/widget.js" async></script>
    <script src="https://bpmsoft-oc-widget1.corporate-domain.ru/3.2/chunk-vendors.js" async></script>
</body>
</html>
		

 
	

Все клиенты, с которыми происходит взаимодействие, сохраняются в объекте BPMSoftOCCClient. У этого объекта есть поле InternalId, куда для канала «Виджет» будет записан clientId. Используя clientId можно связать клиента, написавшего в чат, и контакт в BPMSoft.

Примечание. По умолчанию канал «Виджет» не связывает клиента, написавшего в чат, и контакт, как это возможно в других каналах.

Настройки отображения окна диалога

Изменение цвета шапки виджета

Для изменения цвета шапки необходимо добавить в стили:
#bpmsoftoccchat-container .bpmsoftoccchat-conversation-body-profile { background: #4d1965 !important; }

Укажите цвет обозначением шестнадцатеричной системы счисления.

Рисунок 7 — Шапка виджета

Открытие виджета по таймеру

В конец <body> вставьте скрипт, заменив число 5000 на необходимое количество миллисекунд, после которых виджет будет открываться автоматически.

			 <script>
	setTimeout(()=>{
		document.getElementById('bpmsoftoccchat-widget-startbutton').click();
	}, 5000);
</script>

Изменение первой реплики оператора

Для изменения строки необходимо в скрипт добавить текст, например, «Оператор скоро ответит! Подождите, пожалуйста!»:
window.bpmsoftoccconfig.welcomeMessage = { text: "Оператор скоро ответит! Подождите, пожалуйста!" };

Изменение системного сообщения с именем оператора

Для изменения цвета фона необходимо добавить в стили:
.bpmsoftoccchat-operatorinfo-message {background-color: #ff6161!important;}

Укажите цвет обозначением шестнадцатеричной системы счисления.

До	После

Для изменения цвета текста необходимо добавить в стили:
.bpmsoftoccchat-operatorinfo-message-phrase {color: #ffffff !important;}

Укажите цвет обозначением шестнадцатеричной системы счисления.

До	После

Изменение цвета и фона сообщений

Для изменения цвета области вокруг сообщений необходимо добавить в стили:
.bpmsoftoccchat-comment{background: #999999 !important; }

Укажите цвет обозначением шестнадцатеричной системы счисления.

До	После

Для замены цвета текста сообщений оператора необходимо добавить в стили:
.bpmsoftoccchat-comment-container-admin p.bpmsoftoccchat- { color: #ffffff !important; }

Укажите цвет обозначением шестнадцатеричной системы счисления.

До	После

Изменение цвета и прозрачности фона виджета

Для замены цвета и прозрачности фона виджета необходимо добавить в стили:
div#bpmsoftoccchat-main-feed { background-color: rgba(203,210,234,.86) !important;}

Вместо rgba(203,210,234,.86) укажите цвет и прозрачность.

Для изменения цвета и прозрачности фона виджета на определенном размере экрана (или при открытии виджета с мобильных устройств, открытии DevTools) необходимо добавить в стили:
@media screen and (max-width: 980px) { div#bpmsoftoccchat-main-feed { background-color: rgba(203,210,234,.86) !important;}}

До	После

Примечание. Вы можете отдельно установить в браузере настройку по проверке орфографии.

Полный перечень настроек

Ниже предоставлен полный перечень кастомных настроек для виджета (window.bpmsoftoccconfig):

Таблица 1 — Перечень кастомных настроек

Название	Значение
channelId : Guid Обязательный параметр	Этот параметр необходим, чтобы привязать виджет к каналу в BPMSoft. Он генерируется автоматически при создании канала. В случае, если канал подключается, как скрипт, настройка по умолчанию присутствует в тексте скрипта. В случае добавления канала, как vue-компонент, в код страницы необходимо добавить строку: window.bpmsoftoccconfig.channelId = "Ваш channelId" Параметр является обязательным
clientId : String Значение по умолчанию — «»	Параметр используется для передачи идентификатора пользователя сайта. Формат и способ генерации выбирается разработчиками. В дальнейшем этот идентификатор может использоваться по вашему усмотрению, например, в бизнес-процессе чат-бота. window.bpmsoftoccconfig.clientId = "Ваш идентификатор"
connectorUrl : String Значение по умолчанию — «https://bpmsoft-oc-connector1.corporate-domain.ru/»	Параметр содержит адрес коннектора, с которым виджет устанавливает соединение по протоколу WS. При разворачивании коннектора On Site необходимо указать его адрес в этом параметре. Не рекомендуется изменять, если коннектор развернут не в режиме On-site. window.bpmsoftoccconfig.connectorUrl = "https://bpmsoft-oc-connector1.corporate-domain.ru/";
title : String Значение по умолчанию — «BPMSoftOCC»	Параметр содержит заголовок виджета. window.bpmsoftoccconfig.title = "Новый заголовок"
subtitle : String Значение по умолчанию — ''	Параметр необходимо указать, чтобы добавить подзаголовок. window.bpmsoftoccconfig.subtitle = "My Subtitle"
chatMessagePlaceholder : String Значение по умолчанию — 'Введите сообщение и нажмите Enter'	Параметр содержит плейсхолдер поля ввода, куда требуется ввести текстовое сообщение. window.bpmsoftoccconfig.chatMessagePlaceholder = "Введите сообщение..."
chatButtonsPlaceholder : String Значение по умолчанию — 'Выберите один из предложенных вариантов'	Параметр содержит плейсхолдер поля ввода, когда требуется нажать на кнопку в сообщении. window.bpmsoftoccconfig.chatButtonsPlaceholder = "Выберите один из предложенных вариантов"
disableInputOnButtonMessages : Boolean Значение по умолчанию — true	Параметр определяет будет ли блокироваться поле для ввода сообщения, когда приходит сообщение с кнопками. Это необходимо для того, чтобы запретить пользователю вводить текст, когда требуется нажать на одну из кнопок. Установите значение false, чтобы отключить блокировку. window.bpmsoftoccconfig.disableInputOnButtonMessages = false
sendInitialMessageOn WidgetButtonClick : Boolean Значение по умолчанию — true	Параметр определяет будет ли отправляться сообщение от имени клиента в BPMSoft, когда клиент нажимает на кнопку, чтобы открыть виджет. Текст сообщения определяется параметром initialMessageText. Сообщение отправляется только один раз. Если клиент много раз отроет и закроет виджет, то сообщение отправиться только один раз. Сообщение остается невидимым в чате виджета, но отображается в чате BPMSoft. Для отключения отправки этого сообщения установите значение false. window.bpmsoftoccconfig.sendInitialMessageOnWidgetButtonClick = false
initialMessageText : String Значение по умолчанию — 'Клиент открыл виджет'	Параметр содержит текст сообщения, которое отправляется автоматически при нажатии кнопки открытия виджета. window.bpmsoftoccconfig.initialMessageText = "Новое сообщение, когда клиент открыл виджет!"
welcomeMessage : Object Значение по умолчанию — null	Параметр может содержать сообщение-шапку, которая будет отображаться в виде первого сообщения в чате виджета. Сообщение-шапка не является обычным сообщением. Оно не передается оператору BPMSoft и отображается только на стороне клиента в виджете. Вариант использования: попросить клиента подождать, пока ему ответит оператор/чат-бот. Сообщение может содержать кнопки. По умолчанию сообщения-шапки нет. Чтобы его добавить, проинициализируйте параметр объектом, как указано в примере. Если кнопки не нужны, то проинициализируйте только атрибут text. window.bpmsoftoccconfig.welcomeMessage = { text: "Оператор скоро ответит! Подождите, пожалуйста!", buttons: ["Ок", "Не ок"] }
timeFormatFuntion : Function Значение по умолчанию — function (timestamp) { var date = new Date(timestamp); return `${date.getHours()}: ${(date.getMinutes() < 10) ? "0" + date.getMinutes() : date.getMinutes()}`; }	Параметр содержит функцию, которая принимает количество миллисекунд и возвращает строку времени. Используется для указания формата времени у сообщений. Используйте свою реализацию для изменения формата времени. window.bpmsoftoccconfig.timeFormatFuntion = function (timestamp) {your code}
localStorageLifeTime : Number Значение по умолчанию — 30	Параметр определяет время хранения истории переписки в виджете в минутах. После истечения указанного времени история будет удалена, а попытка отправить сообщение создаст новый чат в BPMSoft. window.bpmsoftoccconfig.localStorageLifeTime = 100
footerTitle : String Значение по умолчанию — «Чаты и чатботы»	Параметр содержит текст описания, который находится в footer виджета. window.bpmsoftoccconfig.footerTitle = "Чаты и чат-боты"
footerTitleName : String Значение по умолчанию — «BPMSoftOCC»	Параметр содержит текст заголовка, который находится в footer виджета. window.bpmsoftoccconfig.footerTitleName = "..."
footerLink : String Значение по умолчанию — «»	Параметр содержит ссылку на ресурс, на который будет осуществлен редирект после нажатия на текст заголовка в footer виджета. window.bpmsoftoccconfig.footerLink = "..."
themeColor : String Значение по умолчанию — «#ffcb05»	Параметр содержит шестнадцатеричный код цвета, отвечающий за главную цветовую палитру виджета. window.bpmsoftoccconfig.themeColor = "#ffcb05"
enableFileUpload : Boolean Значение по умолчанию — true	Параметр отвечает за возможность отправки файлов из виджета. window.bpmsoftoccconfig.enableFileUpload = true
fileServerUrl : String Значение по умолчанию — «https://bpmsoft-oc-fileservice1.corporate-domain.ru»	Параметр содержит ссылку на файловый сервер, который преобразует все файлы отправленные из виджета в ссылки. window.bpmsoftoccconfig.fileServerUrl = «https://bpmsoft-oc-fileservice1.corporate-domain.ru»
errorFileUploadString : String Значение по умолчанию — «Ошибка»	Параметр, отвечающий за пользовательское отображение статуса отправки файла на виджете в случае, если файл не удалось отправить. window.bpmsoftoccconfig.errorFileUploadString = "Ошибка"
successFileUploadString : String Значение по умолчанию — «Загружено»	Параметр, отвечающий за пользовательское отображение статуса отправки файла на виджете в случае, если если файл удалось успешно отправить. window.bpmsoftoccconfig.bpmsoftoccDownloadIcon = "https://bpmsoft-oc-widget1.corporate-domain.ru/src/download.svg";
bpmsoftoccDownloadIcon : String Значение по умолчанию — «https://bpmsoft-oc-widget1.corporate-domain.ru/src/download.svg»	Параметр отвечающий за ссылку иконки изображения, которое формируется во время отправки пользователем файла. window.bpmsoftoccconfig.bpmsoftoccDownloadIcon = «https://bpmsoft-oc-widget1.corporate-domain.ru/src/download.svg»
isClientTyping : Boolean Значение по умолчанию — «false»	Параметр, отвечающий за включения режима «слежения за пользователем», во время набора пользователем текста. window.bpmsoftoccconfig.isClientTyping = false
operatorInfoMessage : String Значение по умолчанию — «С вами общается {0}»	Параметр, отвечающий за текст сообщения с именем и аватаром оператора, в момент его подключению к чату (Данную функциональность можно включить в crm-системе в настройках виджет-канала). {0} — внутренний параметр, который заменится на никнейм оператора. window.bpmsoftoccconfig.operatorInfoMessage = "С вами общается {0}"
startButtonSvg : String Главная кнопка виджета Значение по умолчанию:	Для замены вставьте ссылку на .svg файл window.bpmsoftoccconfig.startButtonSvg = «https://bpmsoft-oc-widget1.corporate-domain.ru/src/n-pulseImage.svg»
attachFileButton : String Значение по умолчанию — «https://bpmsoft-oc-widget1.corporate-domain.ru/src/upload-button.png»	Параметр, отвечающий за ссылку иконки «Прикрепить файл» window.bpmsoftoccconfig.attachFileButton = «https://bpmsoft-oc-widget1.corporate-domain.ru/src/upload-button.png»
emojiIcon: String Значение по умолчанию — «https://bpmsoft-oc-widget1.corporate-domain.ru/src/smile.png»	Параметр отвечающий за ссылку иконки «Эмодзи» window.bpmsoftoccconfig.emojiIcon = «https://bpmsoft-oc-widget1.corporate-domain.ru/src/smile.png»
noMessagesHistoryCaption : String Значение по умолчанию — «Нет истории сообщений»	Параметр, отвечающий за текст, когда нет сообщений. window.bpmsoftoccconfig.noMessagesHistoryCaption = "Нет истории сообщений"
srcUrl : String Значение по умолчанию — «https://bpmsoft-oc-widget1.cloudbpm.ru/src»	Ссылка на файлы виджета (картинки). window.bpmsoftoccconfig.srcUrl
fileLoadingPlaceholder : String Значение по умолчанию — «Загрузка файла…»	Параметр, отвечающий за ожидание загрузки и отправки файла. window.bpmsoftoccconfig.fileLoadingPlaceholder
closeChatCaption : String Значение по умолчанию — «Свернуть»	Параметр, который задает текст подсказки при наведении на кнопку «Свернуть». window.bpmsoftoccconfig.closeChatCaption
showChannelPanel : Boolean Значение по умолчанию — «False»	Параметр, который включает отображение списка каналов из настройки «channelsInPanel». window.bpmsoftoccconfig.showChannelPanel
showChannelPanel : Boolean Значение по умолчанию — «False»	Параметр, который включает отображение списка каналов из настройки «channelsInPanel». window.bpmsoftoccconfig.showChannelPanel
channelPanelHeader : String Значение по умолчанию — «Выберите канал для продолжения общения»	При включенном параметре «showChannelPanel» в списке каналов отображается текст, который можно задать в параметре: window.bpmsoftoccconfig.channelPanelHeader
channelsInPanel : Object Значение по умолчанию — «null»	Параметр, который содержит список каналов на выбор. В поле «link» необходимо ввести «URL» для перенаправления. Также вы можете локализировать параметр. window.bpmsoftoccconfig.channelsInPanel
window.bpmsoftoccconfig.backToChannelChooseCaption : String Значение по умолчанию — «Вернуться к списку каналов»	При включенной «showChannelPanel» Параметр, который задает текст при наведении на кнопку в виджете. window.bpmsoftoccconfig.backToChannelChooseCaption
window.bpmsoftoccconfig.visible : Boolean Значение по умолчанию — «True»	Параметр, отвечающий за скрытие виджета со страницы. window.bpmsoftoccconfig.visible
window.bpmsoftoccconfig.noMessagesHistoryCaption : String Значение по умолчанию — «No messages history»	Параметр, отвечающий за текст, который будет отображаться в пустом поле диалога. window.bpmsoftoccconfig.noMessagesHistoryCaption
window.bpmsoftoccconfig.yourOperatorCaption : String Значение по умолчанию — «Your operator»	Параметр, отвечающий за подпись «Ваш оператор», когда оператор отображается на коммуникационной панели. window.bpmsoftoccconfig.yourOperatorCaption
window.bpmsoftoccconfig.bpmsoftoccDownloadClientIcon : String Значение по умолчанию — «${configObj.srcUrl}/n-downloadClient.svg»	Параметр, отвечающий за ссылку с изображением для кнопки скачивания файла. window.bpmsoftoccconfig.bpmsoftoccDownloadClientIcon
window.bpmsoftoccconfig.headerImageSrc : String Значение по умолчанию — «${configObj.srcUrl}/bpmsoft.svg»	Параметр, отвечающий за ссылку с изображением логотипа BPMSoft в верхней панели. window.bpmsoftoccconfig.headerImageSrc
window.bpmsoftoccconfig.sendButtonIcon : String Значение по умолчанию — «${configObj.srcUrl}/n-send-button.svg»	Параметр, отвечающий за ссылку с изображением кнопки «Отправить». window.bpmsoftoccconfig.sendButtonIcon

Полный скрипт с настройками по умолчанию

Ниже предоставлен полный перечень кастомных настроек для виджета (window.bpmsoftoccconfig):

			 <script> 
	window.bpmsoftoccconfig.connectorUrl = "https://bpmsoft-oc-connector1.corporate-domain.ru";
	window.bpmsoftoccconfig.srcUrl = 'https://bpmsoft-oc-widget1.corporate-domain.ru/src';
	window.bpmsoftoccconfig.fileServerUrl = "https://bpmsoft-oc-fileservice1.corporate-domain.ru";
	window.bpmsoftoccconfig.channelId = "";
	window.bpmsoftoccconfig.title = "";
	window.bpmsoftoccconfig.subtitle = "";
	window.bpmsoftoccconfig.footerTitle = "";
	window.bpmsoftoccconfig.footerTitleName = "";
	window.bpmsoftoccconfig.footerLink = "";
	window.bpmsoftoccconfig.chatMessagePlaceholder = "Enter message...";
	window.bpmsoftoccconfig.chatButtonsPlaceholder = "Please select one of the following options";
	window.bpmsoftoccconfig.fileLoadingPlaceholder = "Loading file...";
	window.bpmsoftoccconfig.closeChatCaption = 'Minimize';
	window.bpmsoftoccconfig.saveFeedCaption = "Save messaging history";
	window.bpmsoftoccconfig.pdhHeaderCaption = "Messaging with agent history";
	window.bpmsoftoccconfig.pdfOperatorSignCaption = "Agent phrase";
	window.bpmsoftoccconfig.pdfClientSignCaption = "My phrase";
	window.bpmsoftoccconfig.localStorageLifeTime = 30;
	window.bpmsoftoccconfig.clientId = "";
	window.bpmsoftoccconfig.disableInputOnButtonMessages = true;
	window.bpmsoftoccconfig.sendInitialMessageOnWidgetButtonClick = true;
	window.bpmsoftoccconfig.initialMessageText = 'A client opened the webchat';
	window.bpmsoftoccconfig.welcomeMessage = null;
	window.bpmsoftoccconfig.timeFormatFuntion = 
		function(timestamp) {
			var date = new Date(timestamp);
			return `${date.getHours()}:${(date.getMinutes() < 10) ? "0" + date.getMinutes() : date.getMinutes()}`;
		};
	window.bpmsoftoccconfig.showChannelPanel = false;
	window.bpmsoftoccconfig.channelPanelHeader = 'Choose a channel to continue your communication ';
	window.bpmsoftoccconfig.enableFileUpload = true;
	window.bpmsoftoccconfig.backToChannelChooseCaption = "Back to the list of channels";
	window.bpmsoftoccconfig.errorFileUploadString = "Error";
	window.bpmsoftoccconfig.successFileUploadString = "Loaded";
	window.bpmsoftoccconfig.widgetButtonColor = "#FFCB02";
	window.bpmsoftoccconfig.widgetButtonColorLine = "#130658";
	window.bpmsoftoccconfig.isClientTyping = false;
	window.bpmsoftoccconfig.startButtonSvg = null;
	window.bpmsoftoccconfig.isEmojiVisible = false;
	window.bpmsoftoccconfig.operatorInfoMessage = "Your agent is {0}";
	window.bpmsoftoccconfig.visible = true;
	window.bpmsoftoccconfig.canOperatorInitializeChat = false;
	window.bpmsoftoccconfig.cookieSessionTime = 3000000;
	window.bpmsoftoccconfig.showOperatorNameUnderAvatar = false;
	window.bpmsoftoccconfig.connectWssWithoutClick = true;
	window.bpmsoftoccconfig.withoutStartButton = false;

	// Следующие конфиги содержат значение window.bpmsoftoccconfig.srcUrl; это означает что при изменении данной настройки, по умолчанию будут меняться и конфиги внизу
	// Вы также можете вручную установить нужные Вам значения. Пример: window.bpmsoftoccconfig.bpmsoftoccDownloadIcon = 'http:/bpmsoft-oc-widget1.corporate-domain.ru/src/n-download.svg'
	window.bpmsoftoccconfig.bpmsoftoccDownloadIcon = `${window.bpmsoftoccconfig.srcUrl}/n-download.svg`;
	window.bpmsoftoccconfig.bpmsoftoccDownloadClientIcon = `${window.bpmsoftoccconfig.srcUrl}/n-downloadClient.svg`;
	window.bpmsoftoccconfig.operatorAvatar = `${window.bpmsoftoccconfig.srcUrl}/OperatorAvatar.png`;
	window.bpmsoftoccconfig.footerImageLogo = `${window.bpmsoftoccconfig.srcUrl}/mini-logo-grey.png`;
	window.bpmsoftoccconfig.attachFileButton = `${window.bpmsoftoccconfig.srcUrl}/n-upload-button.svg`;
	window.bpmsoftoccconfig.emojiIcon = `${window.bpmsoftoccconfig.srcUrl}/n-smile.svg`;
	window.bpmsoftoccconfig.pulseImage = `${window.bpmsoftoccconfig.srcUrl}/n-pulseImage.svg`;
	window.bpmsoftoccconfig.widgetButtonSrc = `${window.bpmsoftoccconfig.srcUrl}/faq-icon.png`;
	window.bpmsoftoccconfig.headerImageSrc = `${window.bpmsoftoccconfig.srcUrl}/bpmsoft.svg`;
	window.bpmsoftoccconfig.sendButtonIcon = `${window.bpmsoftoccconfig.srcUrl}/n-send-button.svg`;
	window.bpmsoftoccconfig.menuButtonIcon = `${window.bpmsoftoccconfig.srcUrl}/more.png`;
	window.bpmsoftoccconfig.themeColor = "#F9763D";

	/* Список каналов на выбор. В поле link введите URL для перенаправления, а также можете локализировать при необходимости:
	window.bpmsoftoccconfig.channelsInPanel =  [
		{ type : "widget", name : "Continue on this website" },
		{ type : "telegram", name : "Telegram", link : "" },
		{ type : "whatsapp", name : "WhatsApp", link : "" },
	];  */

	// Если вам не нужен список каналов на выбор, то по умолчанию стоит следующее значение
	window.bpmsoftoccconfig.channelsInPanel = null;
</script>
		

 
	

Канал Виджет для сайта (WebSite)

Добавление канала в BPMSoft

Добавление виджета

Кастомизация виджета

Виджет без дополнительных каналов

Виджет с возможностью выбора каналов

Работа с параметром clientId

Настройки отображения окна диалога

Изменение цвета шапки виджета

Открытие виджета по таймеру

Изменение первой реплики оператора

Изменение системного сообщения с именем оператора

Изменение цвета и фона сообщений

Изменение цвета и прозрачности фона виджета

Полный перечень настроек

Полный скрипт с настройками по умолчанию

Рекомендуем изучить