KubeApps
1 subscriber

Разбираем кнопки в Яндекс.Диалогах

Меню с картинками в навыках Алисы

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

Поэтому решил записать все варианты как можно оформить кнопки в диалоге, так как документация для диалогов алисы не содержит большого количество примеров. А также, чтобы самому можно было вернуться и посмотреть. Надеюсь что кому-то это будет тоже полезно.

Чтобы меньше путаться, я буду называть кнопки c параметром hide: True - подсказками (suggests).

1. Обычная кнопка с параметрами url и payload

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

Вот как должен выглядит ответ в json:

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

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

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

2. Подсказка с параметрами url и payload

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

Вот ответ в json:

Тот же самый баг для мобильных клиентов присутствует и для подсказок.

3. Кнопка с параметром url

Визуально ничем не отличается от кнопки с url и payload
Визуально ничем не отличается от кнопки с url и payload
Визуально ничем не отличается от кнопки с url и payload

По нажатию кнопка просто открывает ссылку и ничего не отправляет в навык. Вот так выглядит json для кнопки:

4. Подсказка с параметром url

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

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

Вот так выглядит json:

5. Кнопка с параметром payload

При нажатии параметр payload должен отправиться в навык
При нажатии параметр payload должен отправиться в навык
При нажатии параметр payload должен отправиться в навык

Вот json для отображения кнопки:

Здесь уже запрос ButtonPressed приходит со всех устройств:

6. Подсказка с параметром payload

При нажатии параметр payload должен отправить в навык
При нажатии параметр payload должен отправить в навык
При нажатии параметр payload должен отправить в навык

json:

Так же как для предыдущей кнопки, payload приходит со всех устройств:

7. Галерея картинок - кнопок

Список изображений - кнопок
Список изображений - кнопок
Список изображений - кнопок

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

а вот и json:

При этом вы можете добавить подсказки. Обычные кнопки (hide:false) при этом не будут отображаться. Однако есть возможность добавить одинарную кнопку в footer, как на примере выше.

Также не забывайте что footer и header не обязательно указывать, это опциональные элементы.

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

Подсказка под списком картинок
Подсказка под списком картинок
Подсказка под списком картинок

В данном случае, я убрал параметр url и теперь при нажатии на кнопки в чат отправляется текст кнопки, а в навык приходит запрос

"type": "ButtonPressed" с payload кнопки.

вот пример json:

9. Карточка - кнопка и подсказка

Подсказка под карточкой с изображением
Подсказка под карточкой с изображением
Подсказка под карточкой с изображением

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

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

json:

Думаю, пока что, этого хватит. Пишите если надо добавить другие примеры, или например рассказать про другие нюансы разработки навыков для Алисы.

Кстати я решил создать канал в телеграмме, чтобы уделять навыкам по часу в день и записывать туда какие улучшения я делаю и вообще писать про голосовые интерфейсы и их разработку.
Вот ссылка на канал:
https://t.me/vuiru

При нажатии параметр payload должен отправить в навык