Z tego artykułu dowiesz się, jak dodawać tekst i obrazy do karty lub wiadomości w oknie oraz jak zmienić sposób wyświetlania tekstu i obrazów w wiadomości.
Za pomocą Kreatora kart możesz projektować karty JSON i wyświetlać ich podgląd na potrzeby 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 proporcji obrazu. Widżet Image
obsługuje działania onclick
, które są wykonywane po kliknięciu obrazu przez użytkownika. Przykładowe działania onclick
:
- Otwórz hiperlink z tagiem
OpenLink
, np. hiperlink do dokumentacji dla deweloperów Google Chathttps://developers.google.com/chat
. - Uruchom działanie, które uruchamia funkcję niestandardową, np. wywołanie interfejsu API.
Widżet Image
podlega tym ograniczeniom:
- 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 znajdziesz kartę składającą się z widżetu Image
. Wyświetla on obraz strony docelowej z dokumentacją dla deweloperów w Google Chat. Gdy użytkownik kliknie obraz, w nowej karcie otworzy się dokumentacja dla deweloperów Google Chat.
Dodaj komponent obrazu
Widżet Image
to obraz z ograniczonym stylem. Widżet imageCompent
pozwala zastosować do obrazu cropStyle
i borderStyle
.
Poniższy przykład pokazuje 2 obrazy w siatce, z których 1 z nich jest przycięty:
Przycinanie obrazu
Kształt obrazu możesz dostosować, używając cropStyle
.
Do obrazu można zastosować kilka kształtów:
- Użyj funkcji
SQUARE
, aby przyciąć do kwadratu. - Użyj funkcji
CIRCLE
, aby przyciąć okrągłe zdjęcie. - Użyj funkcji
RECTANGLE_CUSTOM
, aby zastosować prostokątne przycięcie o niestandardowym współczynniku proporcji. Możesz na przykład użyć poleceniaRECTANGLE_4_3
, aby zastosować prostokątne przycięcie o współczynniku proporcji 4:3.
Poniższy przykład pokazuje 5 obrazów w siatce z innymi wartościami cropStyle
zastosowanymi do każdego z nich:
Dodaj ikonę
Widżet Icon
reprezentuje ikonę wbudowanej lub ikony niestandardowej. Z Icon
możesz korzystać w komunikatach na karcie i w oknach dialogowych w taki sposób:
- wyświetlać oddzielną ikonę;
- wyświetlać ikonę przed powiązanym tekstem w ramach widżetu
DecoratedText
; - wyświetlać ikonę jako interaktywny przycisk jako część widżetu
ButtonList
;
Oto karta zawierająca komponent Icon
z wbudowaną ikoną:
Tabela poniżej zawiera listę wbudowanych ikon, które mogą być używane w przypadku wiadomości na karcie:
SAMOLOT | BOOKMARK | ||
BUS | SAMOCHÓD | ||
ZEGAR | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | KWOTA | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
REKLAMA | HOTEL_ROOM_TYPE | ||
ZAPROŚ | MAP_PIN | ||
CZŁONKOSTWO | MULTIPLE_PEOPLE | ||
OSOBA | TELEFON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
GWIAZDKA | SKLEP | ||
BILET | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Dodaj akapit tekstu sformatowanego
Widżet TextParagraph
wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Przy konfigurowaniu zawartości tekstowej tych widżetów uwzględnij tylko odpowiednie tagi HTML.
Więcej informacji o obsługiwanych tagach HTML znajdziesz w sekcji Formatowanie tekstu karty.
Na przykład w przypadku tekstu akapitu dostępne jest takie formatowanie:
- Używaj tagów HTML
<b>
,<u>
i<i>
, aby wyświetlać pogrubienie, podkreślenie lub kursywę. - Linki do witryn w HTML
<a href="https://www.google.com">hyperlinks</a>
. - Dodaj trochę koloru za pomocą kodu HTML
<font color="#ea9999">font tags</font>
.
Każdy widżet TextParagraph
renderuje się jako nowy akapit i można go uznać za podobny do tagu HTML <p>
.
Poniżej znajdziesz kartę składającą się z 2 widżetów TextParagraph
, które służą do wyświetlania dwóch akapitów z prostym formatowaniem HTML:
Wyświetl tekst z elementami dekoracyjnymi
Widżet DecoratedText
wyświetla tekst z opcjonalnym układem i możliwościami. Na przykład:
- Wyświetlaj
icon
na początku tekstu z atrybutemstartIcon
. - Pokaż tytuł przed tekstem, używając symbolu
topLabel
. - Dodaj klikalny przycisk z atrybutem
button
lub przełącznik z przyciskiemswitchControl
.
Użyj widżetu DecoratedText
, jeśli chcesz prezentować informacje w prosty i interaktywny sposób. Świetnie sprawdza się on w takich przypadkach jak wizytówki, aktualizacje stanu zamówień czy powiadomienia o biletach służbowych.
Widżet DecoratedText
obsługuje proste formatowanie tekstu HTML. Przy konfigurowaniu zawartości tekstowej tych widżetów uwzględnij tylko odpowiednie tagi HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w sekcji Formatowanie tekstu karty.
Poniżej znajdziesz kartę z widżetem DecoratedText
służącym do wyświetlania danych kontaktowych, takich jak adres e-mail, stan online, numer telefonu i witryna:
Rozwiązywanie problemów
Gdy aplikacja lub karta 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 interfejsie Google Chat nie pojawia się żaden komunikat o błędzie, ale aplikacja lub karta Google Chat zwraca nieoczekiwany wynik, na przykład komunikat na karcie może się nie pojawić.
Mimo że komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, dostępne są opisowe komunikaty o błędach i dane dziennika, które pomogą Ci naprawić błędy występujące po włączeniu logowania błędów w aplikacjach Google Chat. Informacje o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat i ich naprawianie.