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

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

Дополнительную информацию о создании карточек см. в статье Создание карточек для приложений 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
ОПИСАНИЕ ДОЛЛАР
ЭЛЕКТРОННАЯ ПОЧТА EVENT_SEAT
ПРИБЫТИЕ_РЕЙСА ВЫЛЕТ_РЕЙСА
ОТЕЛЬ ТИП_НОМЕР_ОТЕЛЯ
ПРИГЛАШАТЬ MAP_PIN
ЧЛЕНСТВО НЕСКОЛЬКО_ЛЮДЕЙ
ЧЕЛОВЕК ТЕЛЕФОН
РЕСТОРАН_ИКОНКА КОРЗИНА
ЗВЕЗДА МАГАЗИН
БИЛЕТ ТРЕНИРОВАТЬСЯ
ВИДЕО_КАМЕРА ВИДЕО_ВОСПРОИЗВЕДЕНИЕ

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

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

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

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

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

  • Отображайте жирный, подчеркнутый или курсивный текст с помощью тегов HTML <b> , <u> , <i> .
  • Ссылки на веб-сайты с помощью <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 выдаёт неожиданный результат; например, сообщение может не появиться.

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