На этой странице объясняется, как добавить текст и изображения в карточку или диалоговое сообщение, а также изменить способ отображения текста и изображений в сообщении.
Используйте конструктор карточек для разработки и предварительного просмотра карточных сообщений JSON для приложений чата:
Откройте конструктор карточекПредварительные условия
Добавить изображение
Виджет Image
отображает изображение PNG или JPG, размещенное по URL-адресу HTTPS. Ширина отображаемого изображения заполняет всю ширину отображаемой карты, а его высота регулируется для сохранения соотношения сторон изображения. Виджет Image
поддерживает действия onclick
, которые происходят, когда пользователи щелкают изображение. Пример действий onclick
:
- Откройте гиперссылку с помощью
OpenLink
, например гиперссылку на документацию для разработчиков Google Chat,https://developers.google.com/chat
. - Запустите действие , которое запускает пользовательскую функцию, например вызов API.
Виджет Image
имеет следующие ограничения:
- Поддерживаются только изображения PNG и JPG.
- URL-адрес хоста должен быть
HTTPS
. - Чтобы обеспечить производительность карт, максимальный рекомендуемый размер изображения составляет 2 МБ.
Ниже представлена карточка, состоящая из виджета Image
. Он отображает изображение целевой страницы документации для разработчиков Google Chat. Когда пользователи нажимают на изображение, документация для разработчиков Google Chat открывается на новой вкладке.
Добавьте компонент изображения
Виджет Image
представляет собой изображение с ограниченным стилем. Виджет imageCompent
позволяет применять к изображению cropStyle
и borderStyle
.
В следующем примере показаны два изображения в сетке, одно из которых обрезано:
Обрезать изображение
Вы можете настроить форму изображения, применив cropStyle
. К изображению можно применить несколько фигур:
- Используйте
SQUARE
, чтобы применить квадратную обрезку. - Используйте
CIRCLE
, чтобы применить круглую обрезку. - Используйте
RECTANGLE_CUSTOM
, чтобы применить прямоугольную обрезку с настраиваемым соотношением сторон. Например, вы можете использоватьRECTANGLE_4_3
, чтобы применить прямоугольную обрезку с соотношением сторон 4:3.
В следующем примере показаны пять изображений в сетке с разными cropStyle
, примененными к каждому изображению:
Добавить значок
Виджет Icon
представляет собой либо встроенный значок, либо пользовательский значок. Использовать Icon
в сообщениях-карточках и диалогах можно следующими способами:
- Отображение отдельного значка.
- Отобразите значок перед связанным текстом как часть виджета
DecoratedText
. - Отображение значка в виде интерактивной кнопки как части виджета
ButtonList
.
Ниже представлена карточка, состоящая из компонента Icon
со встроенным значком:
В следующей таблице перечислены встроенные значки, доступные для карточных сообщений:
САМОЛЕТ | ЗАКЛАДКА | ||
АВТОБУС | МАШИНА | ||
ЧАСЫ | CONFIRMATION_NUMBER_ICON | ||
ОПИСАНИЕ | ДОЛЛАР | ||
ЭЛЕКТРОННАЯ ПОЧТА | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
ГОСТИНИЦА | ОТЕЛЬ_НОМЕР_ТИП | ||
ПРИГЛАШАТЬ | MAP_PIN | ||
ЧЛЕНСТВО | MULTIPLE_PEOPLE | ||
ЧЕЛОВЕК | ТЕЛЕФОН | ||
РЕСТОРАН_ICON | КОРЗИНА | ||
ЗВЕЗДА | МАГАЗИН | ||
БИЛЕТ | ТРЕНИРОВАТЬСЯ | ||
ВИДЕОКАМЕРА | ВИДЕО_ВОСПРОИЗВЕДЕНИЕ |
Добавить абзац форматированного текста
Виджет TextParagraph
отображает абзац текста с дополнительным форматированием HTML. При настройке текстового содержимого этих виджетов просто включите соответствующие HTML-теги. Дополнительные сведения о том, какие HTML-теги поддерживаются, см. в разделе Форматирование текста карточки .
Например, для текста абзаца доступно следующее форматирование:
- Отображение текста жирным, подчеркнутым или курсивом с помощью тегов HTML
<b>
,<u>
,<i>
. - Ссылайтесь на веб-сайты с помощью
<a href="https://www.google.com">hyperlinks</a>
в формате HTML. - Добавьте немного цвета с помощью HTML
<font color="#ea9999">font tags</font>
.
Каждый виджет TextParagraph
отображается как новый абзац и его можно рассматривать как аналог HTML-тега <p>
.
Ниже представлена карточка, состоящая из двух виджетов TextParagraph
, используемых для отображения двух абзацев с простым форматированием HTML:
Отображать текст с декоративными элементами
Виджет DecoratedText
отображает текст с дополнительным макетом и возможностями. Например:
- Отобразите
icon
перед текстом с помощьюstartIcon
. - Покажите заголовок перед текстом с помощью
topLabel
. - Добавьте кликабельную кнопку с помощью
button
или переключаемый переключатель с помощьюswitchControl
.
Используйте виджет DecoratedText
, когда вам нужно представить информацию в удобном и интерактивном виде. Виджет идеально подходит для таких случаев использования, как карточки контактов, обновления статуса заказа и уведомления о рабочих билетах.
Виджет DecoratedText
поддерживает простое форматирование текста HTML. При настройке текстового содержимого этих виджетов просто включите соответствующие HTML-теги. Дополнительные сведения о том, какие HTML-теги поддерживаются, см. в разделе Форматирование текста карточки .
Ниже представлена карточка, состоящая из виджета DecoratedText
, используемого для отображения контактной информации, такой как адрес электронной почты, онлайн-статус, номер телефона и веб-сайт:
Устранение неполадок
Когда приложение или карточка Google Chat возвращает ошибку, в интерфейсе Chat отображается сообщение «Что-то пошло не так». или «Невозможно обработать ваш запрос». Иногда в пользовательском интерфейсе чата не отображается сообщение об ошибке, но приложение или карточка чата выдает неожиданный результат; например, сообщение с карточкой может не появиться.
Хотя сообщение об ошибке может не отображаться в пользовательском интерфейсе чата, доступны описательные сообщения об ошибках и данные журнала, которые помогут вам исправить ошибки, если включено ведение журнала ошибок для приложений чата. Информацию о просмотре, отладке и исправлении ошибок см. в разделе «Устранение неполадок и исправление ошибок Google Chat» .