Кнопки, изображения, подсказки в Диалогах

Материал из База знаний
Перейти к навигации Перейти к поиску



Статья представляет собой адаптированный текст Стаса Серебренникова "Разбираем кнопки в Яндекс.Диалогах" и отлично дополняет документацию для диалогов Алисы простыми и наглядными примерами, включая нюансы отображения, а также запросы и ответы в json-формате.



К концу статьи мы научимся делать такие красивые меню, а для начала условимся называть кнопки c параметром "hide": true подсказками (suggests), и напомним, за что согласно официальной справке отвечают два других важных параметра:

  • url - ссылка, которую надо открыть при клике по картинке (не длиннее 1024 байт).
  • payload - любые данные в JSON-формате, которые по клику будут отправлены в Навык (не более 4096 байт).


Кнопка с url и payload

Stas 04 btn url payload.jpg

При нажатии откроется ссылка, указанная в параметре url.


При нажатии кнопки диалог остановится и отправит в навык такой запрос:


Этот запрос можно использовать для сбора метрики (пользователь открыл сайт нажатием именно этой кнопки).

 Во время написания статьи обнаружен баг: запрос от кнопки с payload + url приходил только от Алисы в Яндекс.Браузере.
 Из мобильных клиентов запросы не приходили.


Подсказка с url и payload

Stas 05 suggest url payload.jpg

При нажатии откроется ссылка, указанная в параметре url, и будет отправлен в навык запрос payload.


Как видим, ответ отличается только одной строкой ("hide": true), и в запросе здесь проявляется тот же баг с мобильными клиентами.


Кнопка с url

Stas 06 btn url.jpg

Кнопка и подсказка без payload визуально ничем не отличается от предыдущей.

Их различие - в действиях: по нажатию кнопка просто откроет ссылку (в навык ничего не отправится).


Подсказка с url

Stas 07 suggest url.jpg

Подсказка без payload тоже не отправляет ничего в навык.


Кнопка с payload

В этом случае (указан только payload) запрос ButtonPressed приходит корректно со всех устройств:


Подсказка с payload

Stas 09 suggest payload.jpg

Так же, как в предыдущем случае, запрос приходит со всех устройств:


Галерея картинок в кнопках

Stas 10 btn-gallery.jpg

У всех кнопок указан параметр url и payload, и их поведение аналогично кнопкам из пунктов 1 и 2.


При этом можно добавить и подсказки! Однако обычные кнопки добавить не получится, придется довольствоваться одной кнопкой в footer.


footer и header указывать необязательно.


Галерея картинок в кнопках с подсказками

Stas 11 btn suggest-gallery.jpg

Под списком картинок выводится подсказка.

В данном случае при нажатии на кнопку в чат отправится её текст, а в навык - запрос ButtonPressed с её payload.


Карточка с кнопкой и подсказкой

Stas 12 card btn suggest.jpg

Вывод подсказки под карточкой с изображением.

Как и для списка, для карточки тоже можно добавить подсказки. Обычные кнопки отображаться не будут.

Поведение кнопок полностью соответствует предыдущим примерам и зависит от наличия/отсутствия параметров url/payload.


Удачи в создании красивых и полезных Навыков!

Источник — https://wiki.yaboard.com/index.php?title=Кнопки,_изображения,_подсказки_в_Диалогах&oldid=2795// MOD ext links // End MOD