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

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

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

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

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

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

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

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

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

Примітка

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

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

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

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

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

Посилання#

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

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

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

Як посилання поводяться на сайті:

• На телефоні натискання одразу відкриває посилання.
• На комп'ютері посилання на месенджер або соцмережу відкриває всередині віджета QR-код із підказкою «Щоб написати в …, відскануйте QR-код або перейдіть за посиланням нижче» і кнопкою переходу. Звичайне «Посилання» відкривається одразу в новій вкладці.
• Якщо адресу в посилання на месенджер не заповнено, відвідувач побачить: «Посилання не встановлено. Цей канал зв'язку тимчасово недоступний».

Банер#

Натисніть «Вибрати фото» і завантажте картинку — JPG, PNG або GIF. Велика картинка зменшується до 600 пікселів за довшою стороною. Значок кошика на картинці прибирає банер.

У «Посилання у банері» підійде лише вебадреса — вона починається з http:// або https://.

Коли відвідувач відкриває чат, банер ховається, щоб листуванню вистачило місця.

Тема й кольори#

У «Темі» виберіть, яким віджет буде на сайті:

• «Світла» — завжди світлий;
• «Темна» — завжди темний;
• «Як у відвідувача» — світлий або темний, як тема на пристрої відвідувача. Якщо відвідувач змінить тему, віджет перефарбується одразу, без перезавантаження сторінки.

Кольори задаються для кожної теми окремо. За теми «Як у відвідувача» над кольорами є перемикач «Світла | Темна»: виберіть тему й налаштуйте її кольори. Віджет поруч із панеллю показує ту тему, яку ви зараз налаштовуєте.

Решту відтінків — шапку, рамки, другорядний текст — віджет підбирає сам за фоном і текстом. Колір тексту на акценті теж обирається сам: на світлому акценті він темний, на темному — білий. Кнопки месенджерів під QR-кодом лишаються у фірмових кольорах, а сам QR-код у темній темі стоїть на білій підкладці, щоб камера його прочитала.

«Повернути стандартні кольори» скидає кольори вибраної теми.

Примітка

У віджетів, створених до появи тем, тема — «Світла» з попередніми кольорами кнопки. Темна тема бере в неї колір кнопки й акцент; після першого збереження кольори тем зберігаються окремо.

Домени сайтів#

Поки поле порожнє, віджет працює на будь-якому сайті, куди вставлено його код. Щоб чужий сайт не міг показувати ваш віджет, перелічіть свої домени:

• example.com — лише цей домен (з www. і без);
• *.example.com — сам домен і всі його піддомени.

Можна вставити адресу сторінки повністю — залишиться лише домен. Кириличні домени теж підходять. У списку — до 20 доменів.

Іконка віджета#

Іконка показується в кабінеті — у списку віджетів і в перемикачі — і на сайті: у шапці чату з ботом, ліворуч від заголовка. Сама кнопка віджета на сайті малюється кольорами з налаштувань.

Відкрийте «Іконка» в меню «⋯» віджета або «Змінити іконку» в перемикачі віджетів і завантажте картинку: JPG, PNG, GIF, WebP або AVIF до 5 МБ, краще квадратну. Іконка зберігається одразу.

Якщо щось не працює#

• Віджет не зберігається, помилка біля поля «Посилання». Потрібне хоча б одне посилання. Виняток — віджет з увімкненим чатом: йому посилання не обов'язкові.
• Помилка біля посилання з видом «Посилання». Для нього адреса обов'язкова.
• «Таке посилання відкрити не можна: адреси javascript:, data: та подібні заборонені.» Вставте звичайну адресу.
• «Не вдалося зберегти банер: файл недоступний.» Завантажена, але не збережена картинка зберігається недовго. Завантажте банер заново й одразу натисніть «Зберегти».
• «Банер має бути зображенням JPEG, PNG, GIF або WebP.» Файл іншого формату. Пересохраніть картинку в одному з цих форматів.
• Помилка біля поля «Домени сайтів». У домені допустимі літери, цифри, крапки й дефіси; зірочка — лише на початку, у вигляді *..
• «У проєкті не може бути більше 100 віджетів» — підказка біля вимкненої кнопки «Створити».
• «За 1 день можливо створити не більше 100 віджетів.» Зачекайте до наступного дня.
• «Створення й редагування віджетів обмежено за порушення правил платформи.» Див. Перевірка віджетів платформою.