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

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

Дополнительную информацию о создании карточек см. в статье Создание карточек для приложений Google Chat .

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

Откройте конструктор карт

Предпосылки

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

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

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

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

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

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

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

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

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

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

САМОЛЕТ ЗАКЛАДКА
АВТОБУС МАШИНА
ЧАСЫ CONFIRMATION_NUMBER_ICON
ОПИСАНИЕ ДОЛЛАР
ЭЛЕКТРОННАЯ ПОЧТА МЕРОПРИЯТИЕ_МЕСТО
ПРИБЫТИЕ_РЕЙСА РЕЙС_ВЫЛЕТ
ОТЕЛЬ ТИП_НОМЕР_ОТЕЛЯ
ПРИГЛАШАТЬ MAP_PIN
ЧЛЕНСТВО НЕСКОЛЬКО_ЛЮДЕЙ
ЧЕЛОВЕК ТЕЛЕФОН
РЕСТОРАН_ИКОНКА КОРЗИНА
ЗВЕЗДА МАГАЗИН
БИЛЕТ ТРЕНИРОВАТЬСЯ
ВИДЕО_КАМЕРА ВИДЕО_ВОСПРОИЗВЕДЕНИЕ

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

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

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

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

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

  • Отображение жирного, подчеркнутого или курсивного текста с помощью тегов HTML , , .
  • Ссылки на веб-сайты с помощью hyperlinks HTML.
  • Добавьте немного цвета с помощью font tags .

Каждый виджет TextParagraph отображается как новый абзац и может рассматриваться как аналог HTML-тега

.

Ниже представлена ​​карточка, состоящая из двух виджетов TextParagraph , используемых для отображения двух абзацев с простым форматированием HTML:

Добавить сворачиваемый текстовый абзац

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

Отображение текста с декоративными элементами

Виджет DecoratedText отображает текст с опциональной компоновкой и возможностями. Например:

  • Отобразите icon перед текстом с помощью startIcon .
  • Показывать заголовок перед текстом с помощью topLabel .
  • Добавьте нажимаемую кнопку с помощью button или переключаемый переключатель с помощью switchControl .

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

Виджет DecoratedText поддерживает простое форматирование текста HTML. При настройке текстового содержимого этих виджетов просто включите соответствующие теги HTML. Для получения дополнительной информации о поддерживаемых тегах HTML см. Форматирование текста карточки .

Ниже представлена ​​карточка, состоящая из виджета DecoratedText используемого для отображения контактных данных, таких как адрес электронной почты, статус онлайн, номер телефона и веб-сайт:

Устранение неполадок

Когда приложение или карта Google Chat возвращает ошибку, интерфейс Chat отображает сообщение «Что-то пошло не так» или «Не удалось обработать ваш запрос». Иногда интерфейс Chat не отображает никаких сообщений об ошибках, но приложение или карта Chat выдает неожиданный результат; например, сообщение карты может не отображаться.

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