Dodawanie tekstu i obrazów do kart

Z tej strony 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.

Za pomocą Kreatora kart możesz projektować i przeglądać podglądy wiadomości oraz interfejsów aplikacji czatu:

Otwórz kreatora kart

Wymagania wstępne

Aplikacja Google Chat, w której włączono funkcje interaktywne. Aby utworzyć interaktywną aplikację czatu, wykonaj jeden z tych samouczków 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

Imagewidget wyświetla obraz w formacie PNG lub JPG hostowany na adresie URL HTTPS. Szerokość wyświetlanego obrazu wypełnia całą szerokość wyświetlanej karty, a jego wysokość jest dostosowywana, aby zachować współczynnik proporcji obrazu. Widget Image obsługuje onclick działania, które występują, gdy użytkownicy klikają obraz. Przykłady działań, które mogą być uznane za onclick:

  • Otwórz hiperlink za pomocą OpenLink, na przykład hiperlink do dokumentacji dla deweloperów Google Chat, https://developers.google.com/chat.
  • Uruchom działanie, które wykonuje funkcję niestandardową, np. wywołanie interfejsu 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, zalecamy maksymalny rozmiar obrazu wynoszący 2 MB.

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

Dodawanie komponentu obrazu

Widżet Image to obraz z ograniczoną stylizacją. WidżetimageCompent umożliwia zastosowanie efektów cropStyle i borderStyle do obrazu.

Ten przykład pokazuje 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 SQUARE, aby zastosować przycięcie kwadratowe.
  • Użyj CIRCLE, aby zastosować przycięcie kołowe.
  • Użyj RECTANGLE_CUSTOM, aby zastosować przycięcie prostokątne z niestandardowym formatem. Możesz na przykład użyć tagu RECTANGLE_4_3, aby zastosować przycięcie prostokątne w formacie 4:3.

Ten przykład pokazuje 5 obrazów w siatce z różnymi wartościami atrybutu cropStyle:

Dodaj ikonę

Icon widget reprezentuje ikonę wbudowaną lub niestandardową. Ikony na kartach możesz dodawać, aby:

  • Wyświetlanie samodzielnej ikony.
  • wyświetlać ikonę przed tekstem powiązanym z widżetem DecoratedText;
  • Wyświetlanie ikony jako interaktywnego przycisku w ramach widżetu ButtonList.

Poniżej znajduje się karta z komponentem Icon z wbudowaną ikoną:

W tabeli poniżej znajdziesz listę wbudowanych ikon, które są dostępne w przypadku wiadomości na karcie:

SAMOLOT BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
ZAPROŚ MAP_PIN
CZŁONKOSTWO MULTIPLE_PEOPLE
PERSON TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR SKLEP
BILET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Dodawanie tekstu do karty

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

Dodawanie akapitu z sformatowanym tekstem

Widżet TextParagraph wyświetla akapit tekstu z opcjonalnym formatowaniem HTML. Podczas ustawiania zawartości tekstowej tych widżetów uwzględnij odpowiednie tagi HTML. Więcej informacji o tym, które tagi HTML są obsługiwane, znajdziesz w artykule Formatowanie tekstu na kartach.

Na przykład w przypadku tekstu akapitowego dostępne jest to formatowanie:

  • Wyświetlanie tekstu pogrubionego, podkreślonego lub kursywym za pomocą tagów HTML <b>, <u> i <i>.
  • link do stron internetowych z HTML-em <a href="https://www.google.com">hyperlinks</a>,
  • Dodaj kolor za pomocą kodu HTML <font color="#ea9999">font tags</font>.

Każdy widżet TextParagraph jest renderowany jako nowy akapit i może być traktowany podobnie do tagu HTML <p>.

Poniżej znajduje się karta z 2 widżetami TextParagraph służącymi do wyświetlania 2 akapitów z prostym formatowaniem HTML:

Dodawanie akapitu tekstu zwijanego

Można je zwinąć, aby użytkownicy mogli wyświetlić więcej informacji. Ten widżet doskonale nadaje się do prezentowania długich treści lub dodatkowych szczegółów, które można wyświetlić po wybraniu, tworząc dynamiczne i interaktywne środowisko użytkownika.

Wyświetlanie tekstu z elementami ozdobnymi

Widget DecoratedTextwyświetla tekst z opcjonalnym układem i funkcjami. Na przykład:

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

Używaj widżetu DecoratedText, gdy chcesz przedstawić informacje w łatwy do przyswojenia i interaktywny sposób. Widżet doskonale nadaje się do takich zastosowań jak karty kontaktowe, aktualizacje stanu zamówienia i powiadomienia o zgłoszeniu.

Widżet DecoratedText obsługuje proste formatowanie HTML tekstu. Podczas ustawiania zawartości tekstowej tych widżetów uwzględnij odpowiednie tagi HTML. Więcej informacji o tym, które tagi HTML są obsługiwane, znajdziesz w sekcji Formatowanie tekstu na karcie.

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

Rozwiązywanie problemów

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

Komunikat o błędzie może się nie wyświetlać w interfejsie czatu, ale gdy włączone jest rejestrowanie błędów w przypadku aplikacji czatu, dostępne są opisowe komunikaty o błędach i dane dziennika, które pomogą Ci je naprawić. Aby dowiedzieć się, jak wyświetlać, debugować i naprawiać błędy, przeczytaj artykuł Rozwiązywanie problemów z błędami Google Chat.