Dodawanie tekstu i obrazów do karty lub okna

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 kart

Wymagania wstępne

  • Konto Google Workspace z dostępem do Google Chat.
  • Opublikowana aplikacja Google Chat. Aby utworzyć aplikację do obsługi czatu, skorzystaj z tego quickstart.

    • 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ów https://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
    E-MAIL 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ą 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 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.