Dodawanie tekstu i obrazów do kart

Na tej stronie dowiesz się, jak dodawać i formatować tekst oraz obrazy na kartach.

Więcej informacji o tworzeniu kart znajdziesz w artykule Tworzenie kart dla aplikacji Google Chat.

Użyj narzędzia do tworzenia kart, aby projektować i wyświetlać podgląd wiadomości oraz interfejsów użytkownika aplikacji Google Chat:

Otwórz narzędzie do tworzenia kart

Wymagania wstępne

Aplikacja Google Chat skonfigurowana do odbierania zdarzeń interakcji i odpowiadania na nie. Aby utworzyć interaktywną aplikację do obsługi czatu, wykonaj jeden z tych przewodników Szybki start, w zależności od architektury aplikacji, której chcesz użyć:

Dodawanie obrazów lub ikon

Z tej sekcji dowiesz się, jak dodawać do kart elementy wizualne, takie jak obrazy, komponenty obrazów i ikony.

Dodaj obraz

Image wyświetla obraz PNG lub JPG hostowany pod adresem URL HTTPS. Szerokość wyświetlanego obrazu jest równa szerokości wyświetlanej karty, a wysokość dostosowuje się tak, aby zachować współczynnik proporcji obrazu. Widżet Image obsługuje onclick działania, które są wykonywane, gdy użytkownicy klikają obraz. Przykłady działań onclick:

  • Otwórz hiperlink za pomocą 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łuje interfejs API.

Widżet Image ma te ograniczenia:

  • Obsługiwane są tylko obrazy PNG i JPG.
  • Adres URL hosta musi być HTTPS.
  • Aby zapewnić wydajność kart, zalecany maksymalny rozmiar obrazu to 2 MB.

Poniżej znajdziesz kartę z widżetem Image. Wyświetla obraz strony docelowej dokumentacji Google Chat dla deweloperów. Gdy użytkownicy klikną obraz, dokumentacja dla deweloperów Google Chat otworzy się w nowej karcie.

Dodawanie komponentu obrazu

Widżet Image to obraz o ograniczonych możliwościach stylizacji. imageCompentWidżet umożliwia zastosowanie cropStyle i borderStyle do obrazu.

Przykład poniżej przedstawia 2 obrazy w siatce, z których jeden jest przycięty:

Kształt komponentu obrazu możesz dostosować, stosując cropStyle. Do obrazu można zastosować kilka kształtów:

  • Użyj aplikacji SQUARE, aby zastosować kwadratowe przycięcie.
  • Użyj aplikacji CIRCLE, aby zastosować okrągłe przycięcie.
  • Użyj 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 proporcjach 4:3.

Ten przykład przedstawia 5 obrazów w siatce, do których zastosowano różne elementy cropStyle:

Dodaj ikonę

Widżet Icon może reprezentować wbudowaną lub niestandardową ikonę. Ikony możesz dodawać do kart, aby:

  • Wyświetlanie ikony samodzielnej.
  • Wyświetlaj ikonę przed powiązanym tekstem w ramach widżetu DecoratedText.
  • Wyświetlanie ikony jako interaktywnego przycisku w ramach widżetu ButtonList.

Poniżej znajduje się karta składająca się z komponentu Icon z wbudowaną ikoną:

W tabeli poniżej znajdziesz wbudowane ikony dostępne w przypadku wiadomości w formie karty:

AIRPLANE DODAJ DO ZAKŁADEK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
ZAPROŚ MAP_PIN
SUBSKRYPCJA MULTIPLE_PEOPLE
PERSON TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR SKLEP
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Dodawanie tekstu do karty

W tej sekcji dowiesz się, jak dodawać i formatować tekst na karcie.

Dodawanie akapitu sformatowanego tekstu

TextParagraphWidżet wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Podczas ustawiania treści tekstowej tych widżetów wystarczy uwzględnić odpowiednie tagi HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w artykule Formatowanie tekstu wyświetlanego na kartach.

Tekst akapitu można na przykład sformatować w ten sposób:

  • Wyświetlaj tekst pogrubiony, podkreślony lub pisany kursywą za pomocą tagów HTML <b>, <u>, <i>.
  • Link do stron internetowych z kodem 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 jest renderowany jako nowy akapit i można go traktować jako podobny do tagu HTML <p>.

Poniżej znajduje się karta składająca się z 2 widżetów TextParagraph, które służą do wyświetlania 2 akapitów z prostym formatowaniem HTML:

Dodawanie zwijanego akapitu tekstu

Zwijane akapity tekstu umożliwiają użytkownikom wyświetlanie większej ilości informacji na żądanie. Ten widżet doskonale nadaje się do prezentowania długich treści lub dodatkowych szczegółów, które można wyświetlić po wybraniu, co zapewnia dynamiczną i interaktywną obsługę.

Wyświetlanie tekstu z elementami dekoracyjnymi

DecoratedTextWidżet wyświetla tekst z opcjonalnym układem i funkcjami. Na przykład:

  • Wyświetl icon przed tekstem z startIcon.
  • Wyświetl tytuł przed tekstem za pomocą znaku topLabel.
  • Dodaj przycisk, który można kliknąć button, lub przełącznik switchControl.

Użyj widżetu DecoratedText, gdy chcesz przedstawić informacje w przystępny i interaktywny sposób. Widżet doskonale sprawdza się w przypadkach takich jak karty kontaktowe, aktualizacje stanu zamówienia i powiadomienia o zgłoszeniach.

Widżet DecoratedText obsługuje formatowanie HTML w postaci zwykłego tekstu. Podczas ustawiania treści tekstowej tych widżetów wystarczy uwzględnić odpowiednie tagi HTML. Więcej informacji o obsługiwanych tagach HTML znajdziesz w sekcji Formatowanie tekstu karty.

Poniżej znajduje się karta z DecoratedText widżetem, który służy do wyświetlania danych kontaktowych, takich jak adres e-mail, stan aktywności, numer telefonu i strona internetowa:

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub karta zwraca błąd, w interfejsie Google Chat pojawia się komunikat „Coś poszło nie tak”. lub „Nie udało się przetworzyć Twojej prośby”. Czasami interfejs Google Chat nie wyświetla żadnego komunikatu o błędzie, ale aplikacja lub karta Google Chat daje nieoczekiwany wynik, np. wiadomość na karcie może się nie pojawić.

Chociaż w interfejsie czatu może nie wyświetlać się komunikat o błędzie, opisowe komunikaty o błędach i dane logowania są dostępne, aby pomóc w naprawieniu błędów, gdy rejestrowanie błędów w aplikacjach na czat jest włączone. Pomoc dotyczącą wyświetlania, debugowania i naprawiania błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat.