# Создание и настройка виджета

## Создать виджет

1. Откройте проект и выберите «Виджеты» в меню.
2. Нажмите «Создать».

Виджет создаётся сразу, без формы, и открывается в конструкторе. В нём уже есть заголовок «Привет!» и описание «Свяжитесь с нами по любому из следующих каналов:». Ссылок пока нет — добавьте хотя бы одну, иначе виджет не сохранится.

## Список виджетов

В разделе «Виджеты» проекта собраны все его виджеты. Названием виджета в списке служит его заголовок.

- **Вид.** Переключатель справа показывает виджеты «Списком» или «Карточками». На карточке видны уменьшенный виджет и значки его ссылок; если ссылок нет — надпись «Каналы не подключены».
- **Порядок.** Виджеты перетаскиваются за значок слева. Порядок общий для всех участников проекта.

В меню «⋯» справа:

- «Иконка» — загрузить картинку виджета для кабинета.
- «Создать копию» — создать виджет с теми же текстами, ссылками, баннером, цветами и доменами. Заголовок копии получает пометку «(копия)».
- «Перенести в ...» — перенести виджет в другой ваш проект. Пункт виден только владельцу проекта.
- «Удалить» — удалить виджет. На сайтах, где стоит его код, он перестанет показываться.

> [!NOTE]
> При переносе в другой проект чат с ботом в виджете выключается: бот остаётся в прежнем проекте.

## Конструктор

В конструкторе виджет показан таким, каким его увидит посетитель: окно открыто, под ним — круглая кнопка. Рядом с ней — кнопка с шестерёнкой: она открывает панель «Настройки виджета».

![Панель «Настройки виджета» рядом с виджетом](https://support.watbot.ru/_media/ru/04-widgets/_images/settings.webp?v=1791781230)

Правки в панели сразу видны на виджете, но на сайт попадают только после нажатия «Сохранить». «Отмена» возвращает последнее сохранённое состояние. Если уйти со страницы с несохранёнными правками, кабинет спросит: «Изменения не сохранены. Уйти со страницы?».

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

| Настройка | Что задаёт |
|---|---|
| «Домены сайтов» | На каких сайтах виджет разрешено показывать |
| «Баннер» | Картинка над заголовком |
| «Ссылка в баннере» | Адрес, который откроется по клику на баннер. Поле появляется, когда баннер загружен |
| «Заголовок» | Крупная строка вверху окна, до 50 символов. Обязательное поле |
| «Описание» | Текст под заголовком, до 255 символов |
| «Ссылки» | Способы связи — строки в окне виджета |
| «Чат с ботом» | Чат прямо в окне виджета — см. [Чат в виджете](https://support.watbot.ru/widgets/chat) |
| «Кнопка» | «Цвет кнопки» и «Цвет иконки» — фон круглой кнопки и цвет значка на ней |

### Ссылки

Нажмите «Добавить ссылку» и выберите вид:

| Вид | Что вводить |
|---|---|
| «Ссылка» | «Имя ссылки» — надпись в виджете — и сам адрес. Подойдёт любой адрес: страница сайта, `tel:` с номером телефона, `mailto:` с почтой |
| Telegram, MAX, VK, Viber | Только адрес. Название и значок подставятся сами |

Для мессенджера, в котором работает ваш бот, вставьте общую или дополнительную ссылку на бота из раздела «Ссылки на чат-бота» — тогда переходы из виджета попадут в статистику бота. Где её взять — в разделе [Ссылки на чат-бота](https://support.watbot.ru/chatbots/links). Можно вставить и обычную ссылку на профиль или группу.

Значок шестерёнки у ссылки открывает окно «Настройка ссылки», крестик удаляет ссылку. Порядок меняется перетаскиванием за значок слева.

Как ссылки ведут себя на сайте:

- **На телефоне** нажатие сразу открывает ссылку.
- **На компьютере** ссылка на мессенджер или соцсеть открывает внутри виджета QR-код с подсказкой «Чтобы написать в …, отсканируйте QR-код или перейдите по ссылке ниже» и кнопкой перехода. Обычная «Ссылка» открывается сразу в новой вкладке.
- Если адрес у ссылки на мессенджер не заполнен, посетитель увидит: «Ссылка не установлена. Этот канал связи временно недоступен».

### Баннер

Нажмите «Выбрать фото» и загрузите картинку — JPG, PNG или GIF. Большая картинка уменьшается до 600 пикселей по длинной стороне. Значок корзины на картинке убирает баннер.

В «Ссылка в баннере» подойдёт только веб-адрес — он начинается с `http://` или `https://`.

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

### Домены сайтов

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

- `example.com` — только этот домен (с `www.` и без);
- `*.example.com` — сам домен и все его поддомены.

Можно вставить адрес страницы целиком — останется только домен. Кириллические домены тоже подходят. В списке — до 20 доменов.

### Иконка виджета

Иконка нужна только в кабинете: она показывается в списке виджетов и в переключателе. На сайте кнопка виджета рисуется цветами из настроек.

Откройте «Иконка» в меню «⋯» виджета или «Сменить иконку» в переключателе виджетов и загрузите картинку: JPG, PNG, GIF, WebP или AVIF до 5 МБ, лучше квадратную. Иконка сохраняется сразу.

## Если что-то не работает

- **Виджет не сохраняется, ошибка у поля «Ссылки».** Нужна хотя бы одна ссылка.
  Исключение — виджет с включённым чатом: ему ссылки не обязательны.
- **Ошибка у ссылки с видом «Ссылка».** У неё адрес обязателен.
- **«Такую ссылку открыть нельзя: адреса javascript:, data: и подобные запрещены.»** Вставьте обычный адрес.
- **«Не удалось сохранить баннер: файл недоступен.»** Загруженная, но не сохранённая картинка хранится недолго. Загрузите баннер заново и сразу нажмите «Сохранить».
- **«Баннер должен быть картинкой JPEG, PNG, GIF или WebP.»** Файл другого формата. Пересохраните картинку в одном из этих форматов.
- **Ошибка у поля «Домены сайтов».** В домене допустимы буквы, цифры, точки и дефисы; звёздочка — только в начале, в виде `*.`.
- **«В проекте не может быть больше 100 виджетов»** — подсказка у отключённой кнопки «Создать».
- **«За 1 день возможно создать не более 100 виджетов.»** Подождите до следующего дня.
- **«Создание и редактирование виджетов ограничено за нарушение правил платформы.»** См. [Проверка виджетов платформой](https://support.watbot.ru/widgets).