Как добавить текст и изображения на карточки

На этой странице рассказывается, как добавлять и форматировать текст и изображения на карточках.

Подробнее о том, как создавать карточки для приложений Google Chat…

Используйте Card Builder для разработки и предварительного просмотра сообщений и пользовательских интерфейсов для приложений Chat:

Как открыть Конструктор карточек

Требования

Приложение Google Chat, настроенное на получение взаимодействий с пользователями и ответ на них. Чтобы создать интерактивное приложение Chat, выполните одно из следующих кратких руководств в зависимости от архитектуры приложения, которую вы хотите использовать:

Добавьте изображения или значки

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

добавлять изображения.

Виджет 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 – это изображение с ограниченным набором стилей. Виджет ImageComponent позволяет применять к изображению cropStyle и borderStyle.

На примере ниже показаны два изображения в сетке, одно из которых обрезано.

Вы можете изменить форму компонента изображения, применив cropStyle. Доступны следующие варианты:

  • Используйте SQUARE, чтобы применить квадратное кадрирование.
  • Чтобы обрезать изображение по кругу, используйте CIRCLE.
  • Используйте инструмент RECTANGLE_CUSTOM, чтобы обрезать изображение в форме прямоугольника с произвольным соотношением сторон. Например, с помощью RECTANGLE_4_3 можно применить прямоугольное кадрирование с соотношением сторон 4:3.

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

Добавить значок

Виджет Icon представляет собой встроенный или пользовательский значок. Значки на карточках позволяют:

  • Показывать отдельный значок.
  • Показывать значок перед текстом в виджете DecoratedText.
  • Показывает значок в виде интерактивной кнопки в составе виджета ButtonList.

Ниже показана карточка, состоящая из компонента Icon со встроенным значком.

В таблице ниже перечислены встроенные значки, доступные для сообщений в виде карточек.

AIRPLANE BOOKMARK
BUS CAR
ЧАСЫ CONFIRMATION_NUMBER_ICON
ОПИСАНИЕ DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON ТЕЛЕФОН
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Как добавить текст на карточку

В этом разделе рассказывается, как добавлять и форматировать текст на карточке.

Добавить абзац форматированного текста

Виджет TextParagraph показывает абзац текста с необязательным форматированием HTML. Для этого просто добавьте в текст виджета нужные HTML-теги. Подробнее о том, как форматировать текст в карточках…

Например, для текста абзаца доступны следующие варианты форматирования:

  • Выделять текст полужирным шрифтом, подчеркиванием или курсивом с помощью HTML-тегов <b>, <u>, <i>.
  • Ссылка на сайты с HTML <a href="https://www.google.com">hyperlinks</a>.
  • Добавьте цвета с помощью 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 появляется сообщение "Что-то пошло не так". или "Не удалось обработать запрос". Иногда в интерфейсе Chat не появляется сообщение об ошибке, но приложение Chat или карточка выдает неожиданный результат, например сообщение карточки может не появиться.

Хотя в интерфейсе Chat может не отображаться сообщение об ошибке, описательные сообщения об ошибках и данные журнала доступны, чтобы помочь вам исправить ошибки, когда включено ведение журнала ошибок для приложений Chat. Подробнее о том, как устранять неполадки и ошибки Google Chat…