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

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

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

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

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

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

Приложение Google 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
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
ОТЕЛЬ ОТЕЛЬ_НОМЕР_ТИП
ПРИГЛАШАТЬ MAP_PIN
ЧЛЕНСТВО MULTIPLE_PEOPLE
ЧЕЛОВЕК ТЕЛЕФОН
РЕСТОРАН_ICON КОРЗИНА
ЗВЕЗДА МАГАЗИН
БИЛЕТ ТРЕНИРОВАТЬСЯ
ВИДЕО_КАМЕРА ВИДЕО_ВОСПРОИЗВЕДЕНИЕ

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

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

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

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

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

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

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

,

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

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

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

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

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

Приложение Google 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
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
ОТЕЛЬ ОТЕЛЬ_НОМЕР_ТИП
ПРИГЛАШАТЬ MAP_PIN
ЧЛЕНСТВО MULTIPLE_PEOPLE
ЧЕЛОВЕК ТЕЛЕФОН
РЕСТОРАН_ICON КОРЗИНА
ЗВЕЗДА МАГАЗИН
БИЛЕТ ТРЕНИРОВАТЬСЯ
ВИДЕО_КАМЕРА ВИДЕО_ВОСПРОИЗВЕДЕНИЕ

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

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

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

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

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

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

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