Dodawanie tekstu i obrazów do kart

Na tej stronie dowiesz się, jak dodawać i formatować tekst oraz obrazy na kartach.

Więcej informacji o tworzeniu kart znajdziesz w artykule Tworzenie kart do aplikacji Google Chat.

Za pomocą Kreatora kart możesz projektować i wyświetlać podgląd wiadomości oraz interfejsów aplikacji do Google Chat:

Otwieranie Kreatora kart

Wymagania wstępne

Aplikacja Google Chat skonfigurowana do odbierania interakcji użytkowników i odpowiadania na nie. Aby utworzyć interaktywną aplikację do Google Chat, wykonaj czynności opisane w jednym z tych krótkich przewodników, w zależności od architektury aplikacji, której chcesz użyć:

Dodawanie obrazów lub ikon

W tej sekcji dowiesz się, jak dodawać do kart elementy wizualne, takie jak obrazy, komponenty graficzne i ikony.

Dodaj obraz

Widżet Image wyświetla obraz PNG lub JPG hostowany pod adresem URL HTTPS. Szerokość wyświetlanego obrazu wypełnia całą szerokość wyświetlanej karty, a jego wysokość jest dostosowywana tak, aby zachować format obrazu. Widżet Image obsługuje działania onclick, które są wykonywane, gdy użytkownik kliknie obraz. Przykłady działań onclick:

  • Otwórz hiperlink za pomocą OpenLink, na przykład hiperlink do dokumentacji dla deweloperów Google Chat, https://developers.google.com/chat.
  • wykonać działanie, które uruchamia funkcję niestandardową, np. wywołuje interfejs API.

Widżet Image ma te ograniczenia:

  • Obsługiwane są tylko obrazy PNG i JPG.
  • Adres URL hosta musi być taki: HTTPS.
  • Aby zapewnić wydajność kart, zalecany maksymalny rozmiar obrazu to 2 MB.

Poniżej znajduje się karta z widżetem Image. Wyświetla obraz strony docelowej dokumentacji dla deweloperów Google Chat. Gdy użytkownicy klikną obraz, w nowej karcie otworzy się dokumentacja Google Chat dla deweloperów.

Dodawanie komponentu obrazu

Widżet Image to obraz o ograniczonym stylu. Widżet ImageComponent umożliwia zastosowanie cropStyle i borderStyle do obrazu.

Poniższy przykład pokazuje 2 obrazy w siatce, z których jeden jest przycięty:

Kształt komponentu obrazu możesz dostosować, stosując cropStyle. Do obrazu można zastosować kilka kształtów:

  • Użyj SQUARE, aby przyciąć obraz do kwadratu.
  • Użyj CIRCLE, aby zastosować przycięcie kołowe.
  • Użyj RECTANGLE_CUSTOM, aby zastosować prostokątne przycięcie z niestandardowym formatem obrazu. Możesz na przykład użyć RECTANGLE_4_3, aby zastosować prostokątne przycięcie o proporcjach 4:3.

Poniższy przykład pokazuje 5 obrazów w siatce, z których każdy ma inny atrybut cropStyle:

Dodaj ikonę

Widżet Icon reprezentuje ikonę wbudowaną lub niestandardową. Ikony możesz dodawać do kart, aby:

  • Wyświetlaj samodzielną ikonę.
  • Wyświetl ikonę przed powiązanym tekstem w ramach widżetu DecoratedText.
  • Wyświetlanie ikony jako przycisku interaktywnego w ramach widżetu ButtonList.

Poniżej znajdziesz kartę składającą się z komponentu Icon z wbudowaną ikoną:

W tabeli poniżej znajdziesz wbudowane ikony, które są dostępne w wiadomościach na kartach:

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
ZAPROŚ MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRENUJ
VIDEO_CAMERA VIDEO_PLAY

Dodawanie tekstu do karty

W tej sekcji dowiesz się, jak dodawać i formatować tekst na karcie.

Dodawanie akapitu sformatowanego tekstu

Widżet TextParagraph wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Podczas ustawiania treści tekstowej tych widżetów wystarczy uwzględnić odpowiednie tagi HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w artykule Formatowanie tekstu na kartach.

Na przykład w przypadku tekstu akapitu dostępne jest takie formatowanie:

  • Wyświetlaj tekst pogrubiony, podkreślony lub kursywą za pomocą tagów HTML <b>, <u>, <i>.
  • Linki do stron internetowych z kodem HTML <a href="https://www.google.com">hyperlinks</a>.
  • Dodaj kolor za pomocą kodu HTML <font color="#ea9999">font tags</font>.

Każdy widżet TextParagraph jest renderowany jako nowy akapit i można go traktować podobnie jak tag HTML <p>.

Poniżej znajduje się karta składająca się z 2 widżetów TextParagraph, które służą do wyświetlania 2 akapitów z prostym formatowaniem HTML:

Dodawanie akapitu tekstu zwijanego

Zwijane akapity tekstu umożliwiają użytkownikom wyświetlanie dodatkowych informacji na żądanie. Ten widżet idealnie nadaje się do prezentowania długich treści lub dodatkowych szczegółów, które można wyświetlić po wybraniu, co zapewnia dynamiczne i interaktywne wrażenia użytkownika.

Tekst wyświetlany z elementami ozdobnymi

Widżet DecoratedText wyświetla tekst z opcjonalnym układem i funkcjami. Na przykład:

  • Wyświetlaj icon przed tekstem z startIcon.
  • Wyświetl tytuł przed tekstem za pomocą topLabel.
  • Dodaj przycisk, który można kliknąć, za pomocą button lub przełącznik za pomocą switchControl.

Używaj widżetu DecoratedText, gdy chcesz przedstawić informacje w łatwy do przyswojenia i interaktywny sposób. Widżet doskonale sprawdza się w takich przypadkach jak karty kontaktowe, aktualizacje stanu zamówienia i powiadomienia o zgłoszeniach.

Widżet DecoratedText obsługuje formatowanie HTML zwykłego tekstu. Podczas ustawiania treści tekstowej tych widżetów wystarczy uwzględnić odpowiednie tagi HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w artykule Formatowanie tekstu na karcie.

Poniżej znajduje się karta składająca się z widżetu DecoratedText, który służy do wyświetlania danych kontaktowych, takich jak adres e-mail, stan online, numer telefonu i witryna:

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub karta zwraca błąd, interfejs Google Chat wyświetla komunikat „Coś poszło nie tak”. lub „Nie udało się przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla żadnego komunikatu o błędzie, ale aplikacja lub karta Google Chat generuje nieoczekiwany wynik, np. wiadomość na karcie może się nie pojawić.

Chociaż komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika są dostępne, aby pomóc Ci naprawić błędy, gdy włączone jest rejestrowanie błędów w aplikacjach Google Chat. Pomoc dotyczącą wyświetlania, debugowania i naprawiania błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat.