Z tego artykułu dowiesz się, jak dodawać tekst i obrazy do karty lub komunikatu w oknie, a także jak 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 kartWymagania wstępne
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, a jego wysokość jest dostosowywana w celu zachowania współczynnika proporcji obrazu. Widżet Image
obsługuje działania onclick
wykonywane po kliknięciu obrazu przez użytkownika. Przykładowe działania onclick
:
- Otwórz hiperlink z nagłówkiem
OpenLink
, np. hiperlink do dokumentacji Google Chat dla deweloperówhttps://developers.google.com/chat
. - Uruchom działanie, które uruchamia funkcję niestandardową, np. wywołanie 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świetla obraz strony docelowej dokumentacji Google Chat dla deweloperów. Gdy użytkownik kliknie ten obraz, w nowej karcie otworzy się dokumentacja dla deweloperów Google Chat.
Dodaj komponent obrazu
Widżet Image
to obraz o ograniczonym stylu. Widżet imageCompent
pozwala dodać elementy cropStyle
i borderStyle
do obrazu.
Ten przykład przedstawia 2 obrazy w siatce, z których jeden jest przycięty:
Przycinanie obrazu
Kształt obrazu możesz dostosować, stosując znacznik 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 współczynnikiem proporcji. Możesz na przykład użyćRECTANGLE_4_3
, aby zastosować prostokątne przycięcie o współczynniku proporcji 4:3.
Ten przykład pokazuje 5 obrazów w siatce z innymi parametrami cropStyle
zastosowanymi do każdego z nich:
Dodaj ikonę
Widżet Icon
to ikona wbudowanej lub niestandardowej. Z Icon
możesz korzystać w wiadomościach na karcie i w oknach dialogowych na następujące sposoby:
- wyświetlać oddzielną ikonę,
- wyświetlać ikonę przed powiązanym tekstem jako część widżetu
DecoratedText
; - Wyświetla ikonę jako interaktywny przycisk jako część widżetu
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 | BOOKMARK | ||
BUS | Samochód | ||
ZEGAR | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | KWOTA | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
ZAPROŚ | MAP_PIN | ||
WSPIERANIE | MULTIPLE_PEOPLE | ||
OSOBA | TELEFON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
GWIAZDKA | SKLEP | ||
BILET | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Dodaj akapit sformatowanego tekstu
Widżet TextParagraph
wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Ustawiając zawartość tekstową tych widżetów, wystarczy użyć odpowiednich tagów HTML.
Więcej informacji o obsługiwanych tagach HTML znajdziesz w artykule Formatowanie tekstu karty.
Na przykład tekst akapitu może być tak sformatowany:
- Wyświetlaj pogrubiony, podkreślony lub kursywy tekst z tagami 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
renderuje się jako nowy akapit i można go traktować jak tag HTML <p>
.
Oto karta składająca się z dwóch widżetów TextParagraph
służących do wyświetlania 2 akapitów 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ą symbolustartIcon
. - 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 przedstawić informacje w przystępny i interaktywny sposób. Widżet doskonale sprawdza się w przypadku użycia wizytówek, aktualizacji stanu zamówień i powiadomień o zgłoszeniach do pracy.
Widżet DecoratedText
obsługuje proste formatowanie HTML. Ustawiając zawartość tekstową tych widżetów, wystarczy użyć odpowiednich tagów HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w artykule Formatowanie tekstu karty.
Oto karta składająca się z widżetu DecoratedText
, który wyświetla dane kontaktowe, takie jak adres e-mail, stan online, numer telefonu i strona internetowa:
Rozwiązywanie problemów
Gdy aplikacja lub karta w Google Chat zwróci błąd, w interfejsie Google Chat pojawi się komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami w UI Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja lub karta Google Chat zwraca nieoczekiwany wynik, na przykład wiadomość na karcie.
Mimo że komunikat o błędzie może nie być wyświetlany w interfejsie Google Chat, dostępne są opisowe komunikaty o błędach i dane logów, które pomogą Ci w naprawianiu błędów, gdy logowanie błędów w aplikacjach Google Chat jest włączone. Informacje o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z błędami w Google Chat.