Dodawanie tekstu i obrazów do karty lub okna

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.


Projektuj karty i wyświetl ich podgląd w kreatorze kart.

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 Google Chat, postępuj zgodnie z tym 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 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 Chat https://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ć polecenia RECTANGLE_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
    E-MAIL 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 atrybutem startIcon.
    • Pokaż tytuł przed tekstem, używając symbolu topLabel.
    • Dodaj klikalny przycisk z atrybutem button lub przełącznik z przyciskiem switchControl.

    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, interfejs czatu wyświetli komunikat „Coś poszło nie tak” lub „Nie udało się przetworzyć Twojej prośby”. 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 do obsługi czatu. Informacje o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat i ich naprawianie.