Богатые ответы

Расширенные ответы добавляют визуальные элементы для улучшения взаимодействия пользователя с вашим действием. В качестве части приглашения можно использовать следующие типы расширенных ответов:

  • Базовая карта
  • Карточка изображения
  • Настольная карта

При определении расширенного ответа используйте кандидата с поверхностной возможностью RICH_RESPONSE , чтобы Google Assistant возвращал расширенный ответ только на поддерживаемых устройствах. Вы можете использовать только один расширенный ответ для каждого объекта content в приглашении.

Базовая карта

Базовые карточки разработаны так, чтобы быть краткими, представлять пользователям ключевую (или сводную) информацию и позволять пользователям узнать больше, если вы захотите (с помощью веб-ссылки).

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

Пример базовой карты на умном дисплее

Характеристики

Базовый тип ответа карты имеет следующие свойства:

Свойство Тип Требование Описание
title нить Необязательный Простое текстовое название карты. Заголовки имеют фиксированный шрифт и размер, а символы после первой строки обрезаются. Высота карты сворачивается, если заголовок не указан.
subtitle нить Необязательный Простой текстовый подзаголовок карты. Заголовки имеют фиксированный шрифт и размер, а символы после первой строки обрезаются. Высота карточки сворачивается, если подзаголовок не указан.
text нить Условный

Простое текстовое содержимое карты. Слишком длинный текст обрезается в последнем слове с помощью многоточия. Это свойство является обязательным, если image не присутствует.

Это свойство имеет следующие ограничения:

  • Максимум 15 строк без изображения или 10 с image . Это примерно 750 (без изображения) или 500 (с изображением) символов. Обратите внимание, что мобильные устройства обрезают текст раньше, чем устройства с большими экранами.
  • Текст не должен содержать ссылку.

Поддерживается ограниченное подмножество Markdown:

  • Новая строка с двойным пробелом, за которой следует \n
  • **bold**
  • *italics*
image Image Необязательный Изображение отображается на карточке. Изображения могут быть в формате JPG, PNG и GIF (анимированные и неанимированные).
image_fill ImageFill Необязательный Граница между карточкой и контейнером изображения, которая будет использоваться, когда соотношение сторон изображения не соответствует соотношению сторон контейнера изображения.
button Link Необязательный Кнопка, которая при нажатии связывает пользователя с URL-адресом. Кнопка должна иметь свойство name , содержащее текст кнопки, и свойство url , содержащее URL-адрес ссылки. Текст кнопки не может вводить в заблуждение и проверяется в процессе проверки.

Образец кода

ЯМЛ

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

Карты с изображениями

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

Характеристики

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

Свойство Тип Требование Описание
url нить Необходимый Исходный URL-адрес изображения. Изображения могут быть в формате JPG, PNG или GIF (анимированные и неанимированные).
alt нить Необходимый Текстовое описание изображения, которое будет использоваться для обеспечения доступности.
height int32 Необязательный Высота изображения в пикселях.
width int32 Необязательный Ширина изображения в пикселях.

Образец кода

ЯМЛ

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

Node.js

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

Настольные карты

Карточки-таблицы позволяют отображать в ответе табличные данные (например, спортивную таблицу, результаты выборов и рейсы). Вы можете определить столбцы и строки (до 3 в каждой), которые Ассистент будет отображать в вашей карточке таблицы. Вы также можете определить дополнительные столбцы и строки, а также установить их приоритет.

Пример карточки-таблицы на умном дисплее

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

Характеристики

Тип ответа карточки таблицы имеет следующие свойства:

Свойство Тип Требование Описание
title нить Условный Простой текстовый заголовок таблицы. Это свойство является обязательным, если установлены subtitle .
subtitle нить Необязательный Обычный текстовый подзаголовок таблицы. Настройка темы не влияет на субтитры в карточках таблиц.
columns массив TableColumn Необходимый Заголовки и выравнивание столбцов. Каждый объект TableColumn описывает заголовок и выравнивание другого столбца в той же таблице.
rows массив TableRow Необходимый

Данные строки таблицы. Первые три строки гарантированно будут показаны, но другие могут не отображаться на определенных поверхностях. Вы можете протестировать с помощью симулятора, чтобы увидеть, какие строки отображаются для данной поверхности.

Каждый объект TableRow описывает ячейки разных строк одной и той же таблицы.

image Image Необязательный Изображение, связанное с таблицей.
button Link Необязательный Кнопка, которая при нажатии связывает пользователя с URL-адресом. Кнопка должна иметь свойство name , содержащее текст кнопки, и свойство url , содержащее URL-адрес ссылки. Текст кнопки не может вводить в заблуждение и проверяется в процессе проверки.

Образец кода

В следующих фрагментах показано, как реализовать табличную карточку:

ЯМЛ

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

Настройка ваших ответов

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

Чтобы установить собственную тему ответа, выполните следующие действия:

  1. В консоли «Действия» выберите «Разработка» > «Настройка темы» .
  2. Установите любое или все из следующего:
    • Цвет фона : используется в качестве фона ваших карточек. Обычно используйте светлый цвет фона, чтобы содержимое карточки было легче читать.
    • Основной цвет : основной цвет текста заголовков ваших карточек и элементов интерфейса. В общем, используйте более темный основной цвет, чтобы лучше контрастировать с цветом фона.
    • Семейство шрифтов : описывает тип шрифта, используемый для заголовков и других заметных текстовых элементов.
    • Стиль угла изображения : изменяет внешний вид углов ваших карточек.
    • Фоновое изображение : пользовательское изображение, которое можно использовать вместо цвета фона. Предоставьте два разных изображения, когда наземное устройство находится в альбомном или портретном режиме. Если вы используете фоновое изображение, основным цветом будет белый.
  3. Нажмите Сохранить .
Настройка темы в консоли действий