Dodawanie tekstu i obrazów do karty lub okna

Z tego artykułu dowiesz się, jak dodać tekst i obrazy do karty lub komunikatu w oknie. możesz 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.
  • Opublikowaną aplikację Google Chat. Aby utworzyć Aplikacja Google Chat, obserwuj krótkie wprowadzenie.

    • 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, jego wysokość zostanie dostosowana, by zachować współczynnik proporcji obrazu. Widżet Image obsługuje Działania: onclick gdy użytkownik kliknie obraz. Przykładowe działania onclick:

    • Otwórz hiperlink z: OpenLink np. hiperlink do dokumentacji Google Chat dla deweloperów, https://developers.google.com/chat
    • Uruchom działanie który uruchamia niestandardową funkcję, taką jak wywoływanie 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świetlana Obraz strony docelowej dokumentacji Google Chat dla deweloperów. Gdy użytkownik kliknie ikonę dokumentacja dla deweloperów Google Chat otworzy się w nowej karcie.

    Dodaj komponent obrazu

    Widżet Image to obraz o ograniczonym stylu. An Widżet imageCompent umożliwia zastosowanie cropStyle i borderStyle do obrazu.

    Ten przykład przedstawia 2 obrazy w siatce, na których jeden z nich jest przycięte:

    Przycinanie obrazu

    Kształt obrazu możesz dostosować, stosując 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 aspektem współczynnik proporcji. Możesz na przykład użyć narzędzia RECTANGLE_4_3, aby zastosować prostokątne przycięcie z formatem obrazu 4:3.

    Poniższy przykład pokazuje 5 obrazów w siatce z innym obiektem cropStyle zastosowane do każdego obrazu:

    Dodaj ikonę

    Widżet Icon reprezentuje wbudowane lub niestandardowy . Możesz użyć usługi Icon w: wiadomości z kart oraz okna w następujący sposób:

    • wyświetlać oddzielną ikonę,
    • wyświetlać ikonę przed powiązanym tekstem, jako część DecoratedText.
    • wyświetlać ikonę jako interaktywny przycisk, 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 ZAKŁADKA
    autobus Samochód
    ZEGAR CONFIRMATION_NUMBER_ICON
    DESCRIPTION KWOTA
    E-MAIL EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    HOTEL HOTEL_ROOM_TYPE
    INVITE MAP_PIN
    WSPIERANIE MULTIPLE_PEOPLE
    OSOBA TELEFON
    RESTAURANT_ICON SHOPPING_CART
    STAR SKLEP
    BILET POCIĄG
    VIDEO_CAMERA VIDEO_PLAY

    Dodaj akapit sformatowanego tekstu

    Widżet TextParagraph wyświetla akapit z opcjonalnym formatowaniem HTML. Podczas ustawiania zawartość tekstową tych widżetów, wystarczy dodać odpowiednie tagi HTML. Aby dowiedzieć się, które tagi HTML są obsługiwane, zobacz Formatowanie tekstu karty

    Na przykład tekst akapitu może być tak sformatowany:

    • Wyświetlaj pogrubiony, podkreślony lub kursywy tekst w językach 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 jest renderowany jako nowy akapit i można go uwzględnić podobny do tagu HTML <p>.

    Ta karta zawiera dwa widżety TextParagraph używane do wyświetlać dwa akapity 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 zaprezentować informacje w formie łatwy w odbiorze i interaktywny sposób. Widżet świetnie sprawdza się w takich zastosowaniach, jak: wizytówki, informacje o stanie zamówień i powiadomienia o biletach służbowych.

    Widżet DecoratedText obsługuje proste formatowanie HTML. Podczas ustawiania zawartość tekstową tych widżetów, wystarczy dodać odpowiednie tagi HTML. Dla: które tagi HTML są obsługiwane, zobacz Formatowanie tekstu karty

    Poniżej znajduje się karta zawierająca widżet DecoratedText używany do wyświetlania dane kontaktowe, takie jak adres e-mail, stan online, numer telefonu witryna:

    Rozwiązywanie problemów

    Gdy aplikacja Google Chat lub card zwraca błąd, Interfejs czatu wyświetla komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja Google Chat lub zwraca nieoczekiwany wynik; na przykład wiadomość w formie karty .

    Komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika, które pomogą Ci w naprawianiu błędów gdy logowanie błędów aplikacji Google Chat jest włączone. Aby uzyskać pomoc w wyświetlaniu, debugowania i naprawiania błędów, zapoznaj się z artykułem Rozwiązywanie problemów z błędami w Google Chat