Как настроить внешний вид виджета с помощью JavaScript

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

Например, вы можете подобрать виджет под фирменные цвета, настроить отступы от краев экрана или встроить его в определенный элемент страницы.

Рассмотрим, как настроить параметры JavaScript и включить встроенный режим.

Настройте виджет

В файле JavaScript настройте следующие параметры. Все они являются необязательными.

Пример кода с кастомизированными параметрами стиля онлайн-чата:

<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