Для того чтобы добавить канал в BPMSoft:
Рисунок 1 — Раздел «Настройка чатов BPMSoft OCC»
Рисунок 2 — Деталь «Каналы»
Если на одном веб-сайте используется несколько виджетов (на разные страницы), то названия этих страниц указываются до домена. Например, test.bpmsoftocc.com это страница bpmsoftocc/test.
Обратите внимание на то, что нельзя создать несколько каналов типа «WebSite» с одинаковым доменом. Если будет создан новый канал, использующий тот же домен, старый канал автоматически перестанет работать.
Кнопки «Получить скрипт» (Рисунок 4) и «Копировать» (Рисунок 5) используются для того, чтобы получить скрипт виджета, который необходимо вставить на сайт клиента:
Рисунок 4 — Страница «Добавление канала Сайт», кнопка «Получить скрипт»
Рисунок 5 — Страница «Добавление канала Сайт», кнопка «Копировать»
Примечание. Выбор версии возможен только в настройках на сайте.
Ниже представлен код, который был сгенерирован для виджета. Вам необходимо вставить данный код на страницу и заменить слово «Title» в настройках на сайте на название компании или любой другой заголовок, который будет отражаться в виджете.
<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 кода. С полным списком настроек для виджета вы можете ознакомиться в разделе Полный перечень настроек.
Рисунок 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>
Для изменения цвета шапки необходимо добавить в стили: #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 — Перечень кастомных настроек
<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>
Настройка каналов Создание операторов