# Створення та налаштування віджета

## Створити віджет

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

Віджет створюється одразу, без форми, і відкривається в конструкторі. У ньому вже є заголовок «Привіт!» і опис «Зв'яжіться з нами будь-яким із цих способів:». Посилань поки немає — додайте хоча б одне, інакше віджет не збережеться.

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

У розділі «Віджети» проєкту зібрано всі його віджети. Назвою віджета в списку слугує його заголовок.

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

У меню «⋯» праворуч:

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

> [!NOTE]
> Під час перенесення в інший проєкт чат із ботом у віджеті вимикається: бот залишається в попередньому проєкті.

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

У конструкторі віджет показано таким, яким його побачить відвідувач: вікно відкрите, під ним — кругла кнопка. Поруч із нею — кнопка з шестернею: вона відкриває панель «Налаштування віджета».

![Панель «Налаштування віджета» поруч із віджетом](https://support.watbot.org/_media/uk/04-widgets/_images/settings.webp?v=1791781231)

Правки в панелі одразу видно на віджеті, але на сайт вони потрапляють лише після натискання «Зберегти». «Скасувати» повертає останній збережений стан. Якщо піти зі сторінки з незбереженими правками, кабінет запитає: «Зміни не збережено. Піти зі сторінки?».

### Налаштування віджета

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

### Посилання

Натисніть «Додати посилання» і виберіть вид:

| Вид | Що вводити |
|---|---|
| «Посилання» | «Ім'я посилання» — напис у віджеті — і саму адресу. Підійде будь-яка адреса: сторінка сайту, `tel:` з номером телефону, `mailto:` з поштою |
| Telegram, MAX, VK, Viber | Лише адресу. Назва й значок підставляться самі |

Для месенджера, у якому працює ваш бот, вставте загальне або додаткове посилання на бота з розділу «Посилання на чат-бота» — тоді переходи з віджета потраплять у статистику бота. Де його взяти — у розділі [Посилання на чат-бота](https://support.watbot.org/uk/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.org/uk/widgets).