Dodawanie tekstu i obrazów do kart

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

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

Korzystając z Kreatora kart, możesz projektować i przeglądać interfejsy użytkownika oraz wiadomości w aplikacjach Google Chat:

Otwórz kreatora kart

Wymagania wstępne

Aplikacja Google Chat skonfigurowana do odbierania i odpowiadania na zdarzenia interakcji. Aby utworzyć interaktywną aplikację czatu, wykonaj jeden z tych samouczków w zależności od architektury aplikacji, której chcesz użyć:

Dodawanie obrazów lub ikon

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

Dodaj obraz

Imagewidget wyświetla obraz w formacie PNG lub JPG hostowany na adresie URL HTTPS. Szerokość wyświetlanego obrazu wypełnia całą szerokość wyświetlanej karty, a jego wysokość jest dostosowywana, aby zachować współczynnik proporcji obrazu. Widżet Image obsługuje onclick działania, które występują, gdy użytkownicy klikają obraz. Przykłady działań, które mogą być uznane za onclick:

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

Widżet Image ma te ograniczenia:

  • Obsługiwane są tylko obrazy PNG i JPG.
  • Adres URL hosta musi być HTTPS.
  • Aby zapewnić skuteczność kart, zalecamy, aby maksymalny rozmiar obrazu wynosił 2 MB.

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

Dodawanie komponentu obrazu

Widżet Image to obraz z ograniczoną stylizacją. WidżetimageCompent umożliwia zastosowanie efektów cropStyle i borderStyle do obrazu.

Ten przykład przedstawia 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 zastosować przycięcie kwadratowe.
  • Użyj CIRCLE, aby zastosować przycięcie kołowe.
  • Użyj RECTANGLE_CUSTOM, aby zastosować przycięcie prostokątne z niestandardowym formatem. Możesz na przykład użyć tagu RECTANGLE_4_3, aby zastosować przycięcie prostokątne w formacie 4:3.

Ten przykład pokazuje 5 obrazów w siatce z różnymi wartościami atrybutu cropStyle:

Dodaj ikonę

Icon widget reprezentuje ikonę wbudowaną lub niestandardową. Ikony na kartach możesz dodawać, aby:

  • wyświetlać samodzielną ikonę.
  • Wyświetlanie ikony przed tekstem powiązanym z widżetem DecoratedText.
  • Wyświetlanie ikony jako interaktywnego przycisku w ramach widżetu ButtonList.

Poniżej znajduje się karta zawierająca komponent Icon z wbudowaną ikoną:

W tabeli poniżej znajdziesz listę wbudowanych ikon, które są dostępne w przypadku wiadomości na karcie:

SAMOLOT ZAZNACZENIE
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
CZŁONKOSTWO MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
GWIAZDKA SKLEP
BILET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Dodawanie tekstu do karty

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

Dodawanie akapitu z sformatowanym tekstem

Widżet TextParagraph wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Podczas ustawiania zawartości tekstowej tych widżetów uwzględnij odpowiednie tagi HTML. Więcej informacji o tym, które tagi HTML są obsługiwane, znajdziesz w artykule Formatowanie tekstu wyświetlanego na kartach.

Na przykład w przypadku tekstu akapitowego dostępne jest to formatowanie:

  • Wyświetlanie tekstu pogrubionego, podkreślonego lub kursywym za pomocą tagów HTML <b>, <u> i <i>.
  • link do stron internetowych z HTML-em <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że być traktowany podobnie do tagu HTML <p>.

Poniżej znajduje się karta z 2 widżetami TextParagraph służącymi do wyświetlania 2 akapitów z prostym formatowaniem HTML:

Dodawanie akapitu tekstu zwijanego

Można je zwinąć, aby użytkownicy mogli wyświetlić więcej informacji. Ten widget doskonale nadaje się do prezentowania długich treści lub dodatkowych szczegółów, które można wyświetlić po wybraniu, tworząc dynamiczne i interaktywne środowisko użytkownika.

Wyświetlanie tekstu z elementami ozdobnymi

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

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

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

Widżet DecoratedText obsługuje proste formatowanie HTML tekstu. Podczas ustawiania treści tekstowych tych widżetów uwzględnij odpowiednie tagi HTML. Więcej informacji o tym, które tagi HTML są obsługiwane, znajdziesz w sekcji Formatowanie tekstu na karcie.

Poniżej znajduje się karta z widżetem DecoratedText, który służy do wyświetlania danych kontaktowych, takich jak adres e-mail, stan aktywności, numer telefonu i adres strony internetowej:

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub karta zwróci błąd, interfejs Google Chat wyświetli komunikat „Coś poszło nie tak”. lub „Nie udało się przetworzyć Twojej prośby”. Czasami interfejs czatu nie wyświetla żadnego komunikatu o błędzie, ale aplikacja lub karta czatu powoduje nieoczekiwany wynik, na przykład może nie wyświetlać się wiadomość na karcie.

Komunikat o błędzie może się nie wyświetlać w interfejsie czatu, ale gdy włączone jest rejestrowanie błędów w przypadku aplikacji czatu, dostępne są opisowe komunikaty o błędach i dane dziennika, które ułatwiają ich rozwiązywanie. Informacje o wyświetlaniu, debugowaniu i poprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z błędami Google Chat.