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

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

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



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

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

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

Теперь вам нужно вставить этот код между тэгами 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.

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

Чтобы поменять некоторые стили виджета, вам нужно переопределить некоторые 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--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 файле на сайте.
Была ли эта статья полезна?
отменить
Спасибо!