# Встраиваемый веб-виджет
<img height="316" width="622" src="https://support.swarmica.com/attachments/-/A/-A_vXZ0IDutWcJzF_a/Swarmica_Web_Widget.png" />

## Необходимые условия

*   Для веб-виджета необходим минимальный тариф [Про](https://swarmica.ru/plans)
*   Включенная фича Чаты (chats)
*   Сервер с Swarmica должен быть доступен извне по доменному имени и протоколу HTTPS

## Создание канала

Для того, чтобы различать веб-приложения (сайты), куда встроен виджет и иметь возможность выполнять разные настройки для разных приложений, следует создавать отдельные каналы типа "Виджет" в Swarmica.

Для создания канала Виджета, зайдите в **Настройки > Каналы >  Виджеты**:

<img height="316" width="627" src="https://support.swarmica.com/attachments/A/E/AEjv4HO33lOGOEqN_a/Screenshot_2025-04-16_at_10.33.51.png" />

Нажмите **Создать** и введите название, например "Виджет на основном сайте" - это название будет отображаться в списках заявок, экспортах данных и т.д.

![](https://support.swarmica.com/attachments/j/K/jKlmoEq3uFsveO6O_a/image.png)

Выберите тип авторизации:

*   Аноним - не будет требовать никакой авторизации.&#x20;
*   OTP код - используется, если вы интегрируете виджет в свое приложение и хотите пробрасывать авторизацию из него.
*   Email - пускает только тех пользователей, которые зарегистрированы в Swarmica.

Переключите бегунок **Включен** и нажмите **Сохранить**.

Теперь виджет готов к встраиванию.

## Встраивание виджета

Чтобы встроить виджет в приложение, добавьте код, отображаемый в правой панели в HTML код сайта или приложения, куда вы хотите встроить виджет. Для того, чтобы скорость загрузки приложения была оптимальна, разместите код ближе к закрывающему тегу `</body>`

Пример кода встраивания:

```jsx
<!-- start embedded Swarmica Chat script -->
<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-" id="tHf5NcVly6D7ztm-" style="position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; overflow: hidden; "
  allowTransparency="true"
  frameborder="0"
  allowTransparency="true" frameborder="0"></iframe>
<script src="https://tool.swarmica.com/widgets/render.js"></script>
<script>
  const iframe = document.getElementById("tHf5NcVly6D7ztm-")
  iframe.onload = () => {
    renderWidget("tHf5NcVly6D7ztm-")
  }
</script>
<!-- end embedded Swarmica Chat scripts -->
```

Также, можно указать параметр локализации виджета, для этого нужно передать параметр `locale=ru` или` locale=en`:

```txt
<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-&locale=ru" ...
```

## Персонализация и стилизация

Изменение поведения виджета возможно с помощью [дополнительных параметров инициализации виджета](https://support.swarmica.com/article/ru/1108-parametry-inicializacii-vidzhetov.html).

Стилизация виджета возможна через [CSS тему бренда](https://support.swarmica.com/article/ru/1823-css-stili-v-vidzhete.html).