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 kartWymagania wstępne
Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu, wykonaj jedno z tych krótkich wprowadzeń dotyczące architektury aplikacji, której chcesz używać:
- Usługa HTTP z Google Cloud Functions.
- Skrypt Google Apps Script
- Google Cloud Dialogflow CX,
- Google Cloud Pub/Sub
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ędziaRECTANGLE_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 | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
WSPIERANIE | MULTIPLE_PEOPLE | ||
OSOBA | TELEFON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
GWIAZDKA | 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:
Dodaj zwijany akapit tekstu
Zwijane akapity tekstu umożliwiają użytkownikom ujawnienie dodatkowych informacji na ich żądanie. Ten widżet idealnie nadaje się do prezentacji długich treści lub dodatkowych szczegółów, można przeglądać po wybraniu, tworząc dynamiczny i interaktywny użytkownik, i uzyskiwanie dodatkowych informacji.
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ą symbolustartIcon
. - 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
Powiązane artykuły
- Zobacz przykładowe aplikacje do obsługi czatu, które korzystają z kart i okien.
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText