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

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

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

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

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

Предпосылки

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

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

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

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

Виджет 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 Chats открывается в новой вкладке.

Добавить компонент изображения

Виджет 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 Чат возвращает ошибку, интерфейс чата наносит сообщение в сообщение «что -то пошло не так». или «Невозможно обработать ваш запрос». Иногда пользовательский интерфейс чата не отображает никакого сообщения об ошибке, но приложение или карта чата дают неожиданный результат; Например, карточное сообщение может не появиться.

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