Как настроить внешний вид виджета с помощью JavaScript
Используйте параметры JavaScript, чтобы управлять тем, как виджет онлайн-чата отображается и работает на вашем сайте, включая его визуальный стиль, позицию, размер и язык системы.
Например, вы можете подобрать виджет под фирменные цвета, настроить отступы от краев экрана или встроить его в определенный элемент страницы.
Рассмотрим, как настроить параметры JavaScript и включить встроенный режим.
Настройте виджет
В файле JavaScript настройте следующие параметры. Все они являются необязательными.
primaryColor |
Основной цвет для фона, сообщений и заголовка чата в формате hex. |
colorScheme |
Параметры темы чата. Вы можете использовать значения light, dark и auto для соответственно светлой, темной или автоматической адаптации. |
chatPosition{} |
Смещение от нижнего и правого края окна. В фигурных скобках нужно указать параметры:
|
custom_img_button{} |
Своя иконка кнопки чата с возможностью изменения изображения при наведении. В фигурных скобках нужно указать параметры:
|
height |
Высота виджета, от 480 до 720 пикселей. |
language |
Язык системных элементов виджета. Поддерживаются следующие значения:
|
Пример кода с кастомизированными параметрами стиля онлайн-чата:
<script>
document.addEventListener('spLiveChatLoaded', function() {
window.sp.liveChat.config({
primaryColor: '#48A0BD',
colorScheme: 'auto',
chatPosition: {
bottom: '32px',
right: '32px'
},
custom_img_button: {
url: 'https://cdn.sendpulse.com/files/mp/5/e4b2d2664f05a7069ad2dedad9c590f6.jpg',
hover_url: 'https://cdn.sendpulse.com/files/mp/5/610bdd6248d1304ddfbbda55794fcb86.png'
},
height: "600px",
language: "pt"
});
});
</script>
Встройте виджет
Встроенный режим размещает виджет внутри выбранного элемента страницы, делая его частью макета страницы. Чтобы было понятнее, вы можете встроить виджет на отдельную страницу поддержки.
Чтобы включить встроенный режим, добавьте атрибут data-is-embedded="true" в скрипт виджета.
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
async>
</script>Во встроенном режиме виджет использует полную ширину и высоту элемента страницы, в который вы размещаете тег <script>.
Если вам нужен больший контроль над размещением, задайте целевой элемент и встроите виджет внутрь него.
Добавьте атрибут data-embedding-target и передайте CSS-селектор. Убедитесь, что селектор соответствует элементу на вашей странице:
<div id="chat"></div>
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
data-embedding-target="#chat"
async>
</script>Задайте размер целевого контейнера в вашем CSS, чтобы виджет соответствовал макету. Например, установите ширину и высоту для #chat:
<style>
#chat {
width: 100%;
height: 600px;
}
</style>Обновлено: 29.04.2025
или