Auf dieser Seite wird erläutert, wie Sie einer Karte oder einer Dialognachricht Text und Bilder hinzufügen und die Darstellung von Text und Bildern in der Mitteilung ändern.
Mit dem Card Builder kannst du JSON-Kartennachrichten für Chat-Apps entwerfen und als Vorschau ansehen:
Den Card Builder öffnenVoraussetzungen
Bild hinzufügen
Das Image
-Widget zeigt ein PNG- oder JPG-Bild an, das unter einer HTTPS-URL gehostet wird.
Die Breite des angezeigten Bilds füllt die gesamte Breite der angezeigten Karte aus. Die Höhe wird angepasst, um das Seitenverhältnis des Bildes beizubehalten. Das Image
-Widget unterstützt onclick
-Aktionen, die ausgeführt werden, wenn Nutzer auf das Bild klicken. Beispiele für onclick
-Aktionen:
- Öffnen Sie einen Hyperlink mit
OpenLink
, z. B. einen Hyperlink zur Google Chat-Entwicklerdokumentationhttps://developers.google.com/chat
. - eine Aktion ausführen, die eine benutzerdefinierte Funktion wie den Aufruf einer API ausführt
Für das Image
-Widget gelten folgende Einschränkungen:
- Es werden nur PNG- und JPG-Bilder unterstützt.
- Die Host-URL muss
HTTPS
sein. - Für eine optimale Leistung der Karten wird eine Bildgröße von maximal 2 MB empfohlen.
Die folgende Karte besteht aus einem Image
-Widget. Es zeigt das Landingpage-Bild der Google Chat-Entwicklerdokumentation. Wenn Nutzer auf das Bild klicken, wird die Entwicklerdokumentation für Google Chat in einem neuen Tab geöffnet.
Bildkomponente hinzufügen
Das Image
-Widget ist ein Bild mit eingeschränktem Stil. Mit einem imageCompent
-Widget können Sie cropStyle
und borderStyle
auf ein Image anwenden.
Das folgende Beispiel zeigt zwei Bilder in einem Raster, in dem eines der Bilder zugeschnitten ist:
Bilder zuschneiden
Sie können die Form eines Bildes anpassen, indem Sie ein cropStyle
anwenden.
Es gibt mehrere Formen, die auf ein Bild angewendet werden können:
- Mit
SQUARE
kannst du einen quadratischen Zuschnitt vornehmen. - Verwende
CIRCLE
, um das Bild kreisförmig zuzuschneiden. - Verwende
RECTANGLE_CUSTOM
, um einen rechteckigen Ausschnitt mit einem benutzerdefinierten Seitenverhältnis zuzuschneiden. Du kannst beispielsweiseRECTANGLE_4_3
verwenden, um einen rechteckigen Zuschnitt mit einem Seitenverhältnis von 4:3 vorzunehmen.
Das folgende Beispiel zeigt fünf Bilder in einem Raster, wobei auf jedes Bild eine andere cropStyle
angewendet wird:
Figur hinzufügen
Das Icon
-Widget ist entweder ein integriertes Symbol oder ein benutzerdefiniertes Symbol. Du kannst Icon
auf folgende Arten in Kartennachrichten und Dialogfeldern verwenden:
- Ein eigenständiges Symbol anzeigen
- Zeigt ein Symbol vor zugehörigem Text als Teil eines
DecoratedText
-Widgets an. - Darstellung eines Symbols als interaktive Schaltfläche im Rahmen eines
ButtonList
-Widgets
Die folgende Karte besteht aus einer Icon
-Komponente mit einem integrierten Symbol:
In der folgenden Tabelle sind die integrierten Symbole aufgeführt, die für Kartennachrichten verfügbar sind:
FLUG | BOOKMARK | ||
BUS | Auto | ||
UHR | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | Dollar | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
EINLADEN | MAP_PIN | ||
MITGLIEDSCHAFT | MULTIPLE_PEOPLE | ||
PERSON | SMARTPHONE | ||
RESTAURANT_ICON | SHOPPING_CART | ||
Stern | GESCHÄFT | ||
TICKET | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Einen Absatz mit formatiertem Text hinzufügen
Das TextParagraph
-Widget zeigt einen Textabschnitt mit optionaler HTML-Formatierung an. Füge beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags ein.
Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter Formatierung von Kartentexten.
Für Absatztext ist beispielsweise die folgende Formatierung verfügbar:
- Fett formatierten, unterstrichenen oder kursiv formatierten Text mit HTML-Tags vom Typ
<b>
,<u>
oder<i>
verwenden. - Verlinke Websites mit HTML
<a href="https://www.google.com">hyperlinks</a>
. - Fügen Sie mit dem HTML-Code
<font color="#ea9999">font tags</font>
Farbe hinzu.
Jedes TextParagraph
-Widget wird als ein neuer Absatz gerendert und kann sich wie ein HTML-<p>
-Tag vorstellen.
Die folgende Karte besteht aus zwei TextParagraph
-Widgets für zwei Absätze mit einfacher HTML-Formatierung:
Anzeigetext mit dekorativen Elementen
Das DecoratedText
-Widget zeigt Text mit optionalem Layout und optionalen Funktionen an. Beispiel:
- Blende
icon
vor dem Text mitstartIcon
ein. - Vor dem Text einen Titel mit
topLabel
anzeigen. - Fügen Sie eine anklickbare Schaltfläche mit
button
oder eine umschaltbare Ein/Aus-Schaltfläche mitswitchControl
hinzu.
Mit dem DecoratedText
-Widget können Sie Informationen einfach und interaktiv präsentieren. Das Widget ist ideal für Anwendungsfälle wie Kontaktkarten, Benachrichtigungen zum Bestellstatus und Benachrichtigungen zu Arbeitstickets.
Das DecoratedText
-Widget unterstützt die einfache HTML-Textformatierung. Füge beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter Formatierung von Kartentexten.
Die folgende Karte besteht aus einem DecoratedText
-Widget, mit dem Kontaktdetails wie E-Mail-Adresse, Onlinestatus, Telefonnummer und Website angezeigt werden:
Fehlerbehebung
Wenn eine Google Chat-App oder -Karte einen Fehler zurückgibt, wird in der Chat-Oberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden“. Manchmal wird in der Chat-UI keine Fehlermeldung angezeigt, die Chat-App oder -Karte aber ein unerwartetes Ergebnis, z. B. wird keine Kartennachricht angezeigt.
Obwohl möglicherweise keine Fehlermeldung in der Chat-UI angezeigt wird, stehen beschreibende Fehlermeldungen und Protokolldaten zur Verfügung, mit denen Sie Fehler beheben können, wenn das Fehler-Logging für Chat-Anwendungen aktiviert ist. Informationen zum Ansehen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.