Dodawanie tekstu i obrazów do karty lub okna

Z tego artykułu dowiesz się, jak dodać tekst i obrazy do karty lub komunikatu w oknie. możesz zmienić sposób wyświetlania tekstu i obrazów w wiadomości.

Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd wiadomości kart JSON przeznaczonych do aplikacji Google Chat:

Otwórz kreator kart

Wymagania wstępne

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu, wykonaj jedno z tych krótkich wprowadzeń dotyczące architektury aplikacji, której chcesz używać:

Dodaj obraz

Widżet Image wyświetla obraz w formacie PNG lub JPG hostowany pod adresem URL HTTPS. Szerokość wyświetlanego obrazu wypełnia całą szerokość wyświetlanej karty, jego wysokość zostanie dostosowana, by zachować współczynnik proporcji obrazu. Widżet Image obsługuje Działania: onclick gdy użytkownik kliknie obraz. Przykładowe działania onclick:

  • Otwórz hiperlink z: OpenLink, np. hiperlink do dokumentacji Google Chat dla deweloperów, https://developers.google.com/chat
  • Uruchom działanie który uruchamia niestandardową funkcję, taką jak wywoływanie interfejsu API.

Widżet Image ma te ograniczenia:

  • Obsługiwane są tylko obrazy w formatach PNG i JPG.
  • Adresem URL hosta musi być HTTPS.
  • Aby karty były skuteczne, maksymalny zalecany rozmiar obrazu to 2 MB.

Poniżej znajduje się karta zawierająca widżet Image. Wyświetlane są w nim: Obraz strony docelowej dokumentacji Google Chat dla deweloperów. Gdy użytkownik kliknie ikonę dokumentacja dla deweloperów Google Chat otworzy się w nowej karcie.

Dodaj komponent obrazu

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

Ten przykład przedstawia 2 obrazy w siatce, na których jeden z nich jest przycięte:

Przycinanie obrazu

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

  • Użyj narzędzia SQUARE, aby przyciąć kwadratowe.
  • Użyj narzędzia CIRCLE, aby przyciąć okrąg.
  • Użyj narzędzia RECTANGLE_CUSTOM, aby zastosować prostokątne przycięcie z niestandardowym aspektem współczynnik proporcji. Możesz na przykład użyć narzędzia RECTANGLE_4_3, aby zastosować prostokątne przycięcie z formatem obrazu 4:3.

Poniższy przykład pokazuje 5 obrazów w siatce z innym obiektem cropStyle zastosowane do każdego obrazu:

Dodaj ikonę

Widżet Icon reprezentuje wbudowane lub niestandardowy . Możesz użyć usługi Icon w: wiadomości z kart oraz okna w następujący sposób:

  • wyświetlać oddzielną ikonę,
  • wyświetlać ikonę przed powiązanym tekstem, jako część DecoratedText.
  • wyświetlać ikonę jako interaktywny przycisk, ButtonList.

Oto karta składająca się z komponentu Icon z wbudowaną ikoną:

W poniższej tabeli znajdziesz wbudowane ikony dostępne dla wiadomości na karcie:

SAMOLOT ZAKŁADKA
autobus Samochód
ZEGAR CONFIRMATION_NUMBER_ICON
DESCRIPTION KWOTA
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
WSPIERANIE MULTIPLE_PEOPLE
OSOBA TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR SKLEP
BILET POCIĄG
VIDEO_CAMERA VIDEO_PLAY

Dodaj akapit sformatowanego tekstu

Widżet TextParagraph wyświetla akapit z opcjonalnym formatowaniem HTML. Podczas ustawiania zawartość tekstową tych widżetów, wystarczy dodać odpowiednie tagi HTML. Aby dowiedzieć się, które tagi HTML są obsługiwane, zobacz Formatowanie tekstu karty

Na przykład tekst akapitu może być tak sformatowany:

  • Wyświetlaj pogrubiony, podkreślony lub kursywy tekst w językach HTML <b>, <u> i <i> .
  • Linki do witryn z kodem HTML <a href="https://www.google.com">hyperlinks</a>.
  • Dodaj trochę koloru, używając kodu HTML <font color="#ea9999">font tags</font>.

Każdy widżet TextParagraph jest renderowany jako nowy akapit i można go uwzględnić podobny do tagu HTML <p>.

Ta karta zawiera dwa widżety TextParagraph używane do wyświetlać dwa akapity z prostym formatowaniem HTML:

Wyświetlaj tekst z elementami dekoracyjnymi

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

  • Wyświetlaj icon przed tekstem za pomocą symbolu startIcon.
  • Wyświetlaj tytuł przed tekstem za pomocą funkcji topLabel.
  • Dodaj klikalny przycisk z elementem button lub przełącznik z opcją switchControl.

Używaj widżetu DecoratedText, jeśli chcesz zaprezentować informacje w formie łatwy w odbiorze i interaktywny sposób. Widżet świetnie sprawdza się w takich zastosowaniach, jak: wizytówki, informacje o stanie zamówień i powiadomienia o biletach służbowych.

Widżet DecoratedText obsługuje proste formatowanie HTML. Podczas ustawiania zawartość tekstową tych widżetów, wystarczy dodać odpowiednie tagi HTML. Dla: które tagi HTML są obsługiwane, zobacz Formatowanie tekstu karty

Poniżej znajduje się karta zawierająca widżet DecoratedText używany do wyświetlania dane kontaktowe, takie jak adres e-mail, stan online, numer telefonu witryna:

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub card zwraca błąd, Interfejs czatu wyświetla komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja Google Chat lub zwraca nieoczekiwany wynik; na przykład wiadomość w formie karty .

Komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika, które pomogą Ci w naprawianiu błędów gdy logowanie błędów aplikacji Google Chat jest włączone. Aby uzyskać pomoc w wyświetlaniu, debugowania i naprawiania błędów, zapoznaj się z artykułem Rozwiązywanie problemów z błędami w Google Chat