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

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

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

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

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

  • Аккаунт Google Workspace с доступом к 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 представляет собой либо встроенный значок, либо пользовательский значок. Использовать 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» .