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

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

• 
• 
• 

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

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать код</button>

Кнопка с url и payload

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ (JSON)</button>

{

 "response": {
   "text": "Example text for button with url and payload.",
   "buttons": [
       {
           "title": "Button with url and payload.",
           "payload": "button1",
           "url": "https://example.com/",
           "hide": false
       }
   ],
   "end_session": false
 },
 "session": {
   "session_id": "2eac4854-fce721f3-b845abba-20d60",
   "message_id": 1,
   "user_id": "AC9WC3DF6FCE052E45A4566A48E6B7193774B84814CE49A922E163B8B29881DC"
 },
 "version": "1.0"

}

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

{

 "meta": {
   "locale": "ru-RU",
   "timezone": "Europe/Moscow",
   "client_id": "YaBro/19.10.3.281 ( ; Windows 10.0.18363)",
   "interfaces": {
     "screen": {}
   }
 },
 "request": {
   "command": "",
   "original_utterance": "",
   "type": "ButtonPressed",
   "payload": "button1"
 },
 "session": {
   "new": false,
   "message_id": 4,
   "session_id": "2eac4854-fce721f3-b845abba-20d60",
   "skill_id": "3ad36498-f5rd-4079-a14b-788652932056",
   "user_id": "AC9WC3DF6FCE052E45A4566A48E6B7193774B84814CE49A922E163B8B29881DC"
 },
 "version": "1.0"

}

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

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

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

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

Кнопка с url

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

Подсказка с url

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

Кнопка с payload

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

Подсказка с payload

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>

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

<button type="button" class="spoilers-button" aria-expanded="false">Показать ответ</button>

<button type="button" class="spoilers-button" aria-expanded="false">Показать запрос</button>