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

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

Чтобы узнать больше о создании карточек, см. раздел «Создание карточек для приложений Google Chat» .

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

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

Предварительные требования

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

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

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

Добавить изображение

Виджет Image отображает изображение в формате PNG или JPG, размещенное по 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 со встроенной иконкой:

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

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

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

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

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

Виджет TextParagraph отображает абзац текста с возможностью форматирования HTML. При настройке текстового содержимого этих виджетов достаточно указать соответствующие 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-форматированием:

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

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

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

The DecoratedText widget displays text with optional layout and capabilities. For example:

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

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

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

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

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

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

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