Спросить ИИ
Русский RU
Перейти в Watbot

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

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

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

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

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

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

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

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

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

Заметка

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

Конструктор

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

Панель «Настройки виджета» рядом с виджетомПанель «Настройки виджета» рядом с виджетом

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

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

Настройка Что задаёт
«Домены сайтов» На каких сайтах виджет разрешено показывать
«Баннер» Картинка над заголовком
«Ссылка в баннере» Адрес, который откроется по клику на баннер. Поле появляется, когда баннер загружен
«Заголовок» Крупная строка вверху окна, до 50 символов. Обязательное поле
«Описание» Текст под заголовком, до 255 символов
«Ссылки» Способы связи — строки в окне виджета
«Чат с ботом» Чат прямо в окне виджета — см. Чат в виджете
«Кнопка» «Цвет кнопки» и «Цвет иконки» — фон круглой кнопки и цвет значка на ней

Ссылки

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

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

Для мессенджера, в котором работает ваш бот, вставьте общую или дополнительную ссылку на бота из раздела «Ссылки на чат-бота» — тогда переходы из виджета попадут в статистику бота. Где её взять — в разделе Ссылки на чат-бота. Можно вставить и обычную ссылку на профиль или группу.

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

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

  • На телефоне нажатие сразу открывает ссылку.
  • На компьютере ссылка на мессенджер или соцсеть открывает внутри виджета 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 виджетов.» Подождите до следующего дня.
  • «Создание и редактирование виджетов ограничено за нарушение правил платформы.» См. Проверка виджетов платформой.