Як налаштувати зовнішній вигляд віджета через 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
або