Мы предоставляем веб-виджет чата, который вы можете разместить на страницах вашего сайта, чтобы посетители могли обращаться к вашему боту с вопросами и получали ответы прямо на сайте. Обратите внимание что чат виджет не будет отображаться в браузере Internet Explorer.

Как создать виджет

Зайдите в настройки каналов вашего бота и нажмите на кнопку Чат виджет. Откроется окно настроек виджета.



Здесь вы можете настроить поведение виджета на вашем сайте. После этого нажмите на кнопку Подключить.

Как разместить виджет на своем сайте

Чтобы поместить чат виджет на свой сайт, нажмите на иконку карандаша в правом верхнем углу созданного канала и скопируйте код скрипта из поля Код виджета.

Теперь вам нужно вставить этот код между тэгами head на всех страницах вашего сайта, где вы хотите разместить виджет с вашим ботом. Например так

<head>
<script src="https://bot.aimylogic.com/chatwidget/ae6deeca-be8e-43f0-b218-2b7f4d1aaaae/justwidget.js" async></script>
</head>


Как передать свои параметры в виджет

Иногда нужно уметь передавать некоторые параметры при загрузке виджета, чтобы бот, например, знал идентификатор пользователя, его имя или другие данные. Такие данные передаются в виджет в момент, когда виджет открывается на сайте.

Чтобы передать параметры со своего сайта, вам необходимо написать вот такой Javascript

<script>
window.juswidgetVariables=new Object();
window.juswidgetVariables.start=new Object();
window.juswidgetVariables.start.id="55";
window.juswidgetVariables.start.name="Слава";
</script>


Этот код необходимо разместить перед строкой, в которой загружается сам виджет.

В приведенном выше примере мы передаем в виджет переменную start, в которой хранится два поля - id и name. В сценарии бота вы можете обратиться к этой переменной, как и к любой другой - $start.name или $start.id

Вы можете передавать любой другой набор полей, но переменная должна всегда иметь имя start.

Ещё один пример: если вам нужно передать адрес вашего магазина, то Html код может выглядеть следующим образом (сначала скрипт с передаваемыми данными, затем скрипт чат-виджета):

<script>
window.juswidgetVariables=new Object();
window.juswidgetVariables.start=new Object();
window.juswidgetVariables.start.address="ул. Ленина";
</script>
<script src="https://bot.aimylogic.com/chatwidget/01f8bfb4-763d-4fbe-aca1-d3c7524e4907/justwidget.js" async
></script>


Затем вы можете оперировать переменной $start.address в сценарии, например, передавать её значение в http-запросе.

Как изменить стиль виджета

Чтобы поменять некоторые стили виджета, вам нужно переопределить некоторые CSS классы на вашем сайте. Ниже приводятся примеры для каждого компонента виджета, стиль которого можно переопределить

Размер логотипа

.justwidget--asst-pic {
width: 100px !important;
height: 100px !important;
}

.justwidget--asst-pic-waves {
bottom: -105px !important;
border-width: 55px !important;
}


Размер диалогового окна

.justwidget.sided .justwidget--inner {
width: 500px !important;
}

.justwidget.sided {
max-height: 300px !important;
}


Текст сообщений

.justwidget--message_content p {
font-style: italic !important;
}


Кнопки

.justwidget--button {
border-radius: 20px !important;
background-color: aqua !important;
}


Размер кнопок

.justwidget--button {
width: 30% !important;
padding: 2px !important;
}


.justwidget--buttons {
justify-content: flex-start !important;
}


.justwidget--button {
margin-right: 10px !important;
}


Изменить кнопку отправки

.justwidget--send a {
background-image: url(http:....jpg);
background-size: contain;
}


Имена клиента и бота

.justwidget--message_content .justwidget--username {
text-transform: uppercase !important;
}


Имя и сообщения бота

.justwidget--message_asst .justwidget--message_content {
color: red !important;
}


Имя и сообщения пользователя

.justwidget--message_user .justwidget--message_content {
color: blue !important;
}


Аватары
.justwidget--message_cell .justwidget--image {
width: 20px !important;
height: 20px !important;
border-radius: 10px !important;
}


Аватар бота

.justwidget--message_asst .justwidget--image {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR…Kzs7MPBaQPFJJ3RBoRrYU9rUHKjNZ/ytgvejO9FO3+RIv5X7Vtp94iw6RcAAAAAElFTkSuQmCC) !important;
}


Аватар пользователя

.justwidget--message_user .justwidget--image {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIW…fbhyVJ6hBFsR3g/v7+o2EYR3d3d+8KhUJwbm6uZjn+HQA9sYxA5bR6kwAAAABJRU5ErkJggg==) !important;
}


.justwidget--message_asst .justwidget--image svg {
display: none;
}


Аватар пользователя фон

.justwidget--message_user .justwidget--image svg path {
fill: blue !important;
}


Быстрые ссылки

.justwidget--message a.quicklink {
color: red !important;
border-bottom: 1px dashed red !important;
}


Ссылки

justwidget--message a {
color: violet !important;
}


Заголовок виджета

.justwidget h1.justwidget--headline {
font-size: 1em !important;
background-color: yellow !important;
color: black !important;
}


Поле ввода сообщения

.justwidget--text {
color: #000000 !important;
background: pink !important;
font-size: 1em !important;
}


Сместить виджет

.justwidget.sided.justwidget_hidden {
right: auto !important;
left: 140px !important;
}

.justwidget.sided {
left: 20px !important;
right: auto !important;
}


Все или часть этих стилей вы можете описать в своем CSS файле на сайте.

Чат виджет: установка в iframe

Установить чатвиджет в iframe можно с использованием:

внешнего скрипта;
кастомных обработчиков.

Установка в iframe с использованием внешнего скрипта

Для встраивания на сайт чат виджета в iframe необходимо:

Добавить на страницу иконку чат виджета, на момент загрузки страницы должна быть скрыта. Элемент:
должен иметь id="justwidget--asst-button";
по клику на кнопку должен вызывать justWidgetApi.open().


Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта. Элемент:
должен иметь id="justwidget--asst-close";
по клику на кнопку должен вызывать justWidgetApi.close().


Добавить на страницу <iframe>, на момент загрузки страницы должен быть скрыт. Элемент:
должен иметь id="justwidget--iframe";
пустой атрибут src (src="").


Добавить на страницу скрипт:
https://<servername>/chatadapter/s/iframe/justwidget-iframe.js

Имплементировать обработчики событий:
JustWidgetHandlers = {
onWidgetReady: function () {
//произошла загрузка виджета
//показать кнопку-иконку виджета, добавить вызовы justWidgetApi.open() и justWidgetApi.close() в обработчики кликов по кнопкам открытия и закрытия виджета
},
onWidgetToggle: function (isOpen) {
//виджет изменил статус закрыт/открыт
//boolean isOpen - статус
//в зависимости от статуса скрывать иконку и показывать iframe и кнопку закрытия или наоборот
}
}


Например:
JustWidgetHandlers = {
onWidgetReady: function () {
showElementById("justwidget--asst-button");
document.getElementById("justwidget--asst-button").addEventListener('click', function () {
justWidgetApi.open();
});
document.getElementById("justwidget--asst-close").addEventListener('click', function () {
justWidgetApi.close();
});
},
onWidgetToggle: function (isOpen) {
if (isOpen) {
hideElementById("justwidget--asst-button");
showElementById("justwidget--asst-close");
showElementById("justwidget--iframe");
} else {
showElementById("justwidget--asst-button");
hideElementById("justwidget--asst-close");
hideElementById("justwidget--iframe");
}
}
}


После инициализации виджета вы можете подключить к нему стили. Для этого вызовите: justWidgetApi.addCustomStyles(<url_внешнего_css_файла>)

После полной загрузки страницы вызывать
justWidgetApi.init("<токен_виджета>")

Установка в iframe с использованием кастомных обработчиков

Для встраивания на сайт чатвиджета в iframe необходимо:

Добавить на страницу иконку чатвиджета, на момент загрузки страницы должна быть скрыта. Элемент:
должен иметь id="justwidget--asst-button";
по клику на кнопку должен вызывать justWidgetApi.open().


Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта. Элемент:
должен иметь id="justwidget--asst-close";
по клику на кнопку должен вызывать justWidgetApi.close().


Добавить на страницу <iframe>, на момент загрузки страницы должен быть скрыт. Элемент:
должен иметь id="justwidget--iframe";
заполненный атрибут src, например src=""https://<имя_сервера>/chatadapter/chatwidget/<токен_чатвиджета>/justwidget-iframe.html"".


Добавить на страницу скрипт:

(function () {
window.justWidgetApi = {
getTargetOrigin: function () {
var justWidgetIframeSrc = document.getElementById('justwidget--iframe').src;
var srcParts = justWidgetIframeSrc.split('/');
return srcParts.splice(0, 3).join('/');
},
postMessage: function (message) {
var justWidgetIframe = document.getElementById('justwidget--iframe').contentWindow;
justWidgetIframe.postMessage(message, this.getTargetOrigin());
},
open: function () {
var message = {
type: 'justWidget.open'
};

this.postMessage(JSON.stringify(message));
},
close: function () {
var message = {
type: 'justWidget.close'
};

this.postMessage(JSON.stringify(message));
},
addCustomStyles: function (stylesheetURL) {
var message = {
type: 'justWidget.styles',
data: {
URL: stylesheetURL
}
};

this.postMessage(JSON.stringify(message));
},
};

window.addEventListener("message", function (event) {
var type,
message;

try {
message = JSON.parse(event.data);
type = message.type;
} catch (e) {
console.error("JustWidget invalid Event.data event.data: " + event.data);
}

switch (type) {
case "justWidget.ready": {
// виджет готов к работе, показать иконку виджета,
return;
}
case "justWidget.toggle": {
// изменение состояния виджета (открыт/закрыт)
// message.data.isOpen - новое состояние виджета
// при открытии (message.data.isOpen = true) скрыть иконку, показать iframe и кнопку закрытия
// при закрытии (message.data.isOpen = false) показать иконку, скрыть iframe и кнопку закрытия
return;
}
default: {
return;
}
}
});
})();


switch (type) можно, например, задать так:

switch (type) {
case "justWidget.ready": {
showElementById("justwidget--asst-button");
document.getElementById("justwidget--asst-button").addEventListener('click', function () {
justWidgetApi.open();
});
document.getElementById("justwidget--asst-close").addEventListener('click', function () {
justWidgetApi.close();
});
return;
}
case "justWidget.toggle": {
if (message.data.isOpen) {
hideElementById("justwidget--asst-button");
showElementById("justwidget--asst-close");
showElementById("justwidget--iframe");
} else {
showElementById("justwidget--asst-button");
hideElementById("justwidget--asst-close");
hideElementById("justwidget--iframe");
}
return;
}


После инициализации виджета вы можете подключить к нему стили. Для этого вызовите: justWidgetApi.addCustomStyles(<url_внешнего_css_файла>)
Была ли эта статья полезна?
отменить
Спасибо!