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 können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:
Card Builder öffnenVoraussetzungen
Bild hinzufügen
Das Image
-Widget zeigt ein PNG- oder JPG-Bild an, das auf einer HTTPS-URL gehostet wird.
Die Breite des angezeigten Bilds füllt die gesamte Breite der angezeigten Karte aus und seine Höhe wird so angepasst, dass das Seitenverhältnis des Bilds erhalten bleibt. Das Image
-Widget unterstützt onclick
-Aktionen, die stattfinden, wenn Nutzer auf das Bild klicken. Beispiele für onclick
-Aktionen:
- Öffnen Sie einen Hyperlink mit
OpenLink
, etwa einen Hyperlink zur Google Chat-Entwicklerdokumentationhttps://developers.google.com/chat
. - Führen Sie eine Aktion aus, die eine benutzerdefinierte Funktion ausführt, z. B. das Aufrufen einer API.
Für das Image
-Widget gelten die folgenden Einschränkungen:
- Es werden nur PNG- und JPG-Bilder unterstützt.
- Die Host-URL muss
HTTPS
sein. - Um leistungsstarke Karten zu gewährleisten, beträgt die maximal empfohlene Bildgröße 2 MB.
Die folgende Karte besteht aus einem Image
-Widget. Hier wird das Landingpage-Bild der Google Chat-Entwicklerdokumentation angezeigt. Wenn Nutzer auf das Bild klicken, wird die Google Chat-Entwicklerdokumentation 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 Bild anwenden.
Das folgende Beispiel zeigt zwei Bilder in einem Raster, wobei eines der Bilder zugeschnitten ist:
Bild zuschneiden
Sie können die Form eines Bildes mit einem cropStyle
anpassen.
Es gibt mehrere Formen, die auf ein Bild angewendet werden können:
- Mit
SQUARE
kannst du das Bild quadratisch zuschneiden. - Mit
CIRCLE
kannst du das Bild kreisförmig zuschneiden. - Verwenden Sie
RECTANGLE_CUSTOM
, um einen rechteckigen Zuschnitt mit einem benutzerdefinierten Seitenverhältnis anzuwenden. Du kannst beispielsweiseRECTANGLE_4_3
verwenden, um einen rechteckigen Ausschnitt mit einem Seitenverhältnis von 4:3 zu erstellen.
Das folgende Beispiel zeigt fünf Bilder in einem Raster, wobei auf jedes Bild ein anderes cropStyle
angewendet wird:
Figur hinzufügen
Das Icon
-Widget ist entweder ein integriertes oder ein benutzerdefiniertes Symbol. Sie können Icon
auf folgende Arten in Kartennachrichten und Dialogfeldern verwenden:
- Ein eigenständiges Symbol anzeigen.
- Hiermit kannst du ein Symbol vor zugehörigem Text als Teil eines
DecoratedText
-Widgets anzeigen lassen. - Hiermit kannst du ein Symbol als interaktive Schaltfläche als Teil eines
ButtonList
-Widgets anzeigen.
Das folgende Beispiel zeigt eine Karte, die aus einer Icon
-Komponente mit einem integrierten Symbol besteht:
In der folgenden Tabelle sind die integrierten Symbole aufgeführt, die für Kartennachrichten verfügbar sind:
FLUGZEUG | BOOKMARK | ||
BUS | Automobil | ||
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 | ||
STERNE | SHOP | ||
TICKET | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Einen Absatz mit formatiertem Text hinzufügen
Das TextParagraph
-Widget zeigt einen Textabschnitt mit optionaler HTML-Formatierung an. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie nur die entsprechenden HTML-Tags ein.
Weitere Informationen dazu, welche HTML-Tags unterstützt werden, findest du unter Formatierung von Kartentext.
Für Absatztexte sind beispielsweise folgende Formatierungen verfügbar:
- Text fett, unterstrichen oder kursiv mit den HTML-Tags
<b>
,<u>
und<i>
anzeigen. - Link zu Websites mit HTML
<a href="https://www.google.com">hyperlinks</a>
. - Fügen Sie mit HTML
<font color="#ea9999">font tags</font>
etwas Farbe hinzu.
Jedes TextParagraph
-Widget wird als neuer Absatz gerendert und kann einem HTML-<p>
-Tag ähneln.
Die folgende Karte besteht aus zwei TextParagraph
-Widgets, mit denen zwei Absätze mit einfacher HTML-Formatierung dargestellt werden:
Anzeigetext mit dekorativen Elementen
Das DecoratedText
-Widget zeigt Text mit optionalem Layout und optionalen Funktionen an. Beispiel:
icon
mitstartIcon
vor dem Text anzeigen- Zeige einen Titel vor dem Text mit
topLabel
an. - Fügen Sie eine anklickbare Schaltfläche mit
button
oder eine schaltbare Ein/Aus-Schaltfläche mitswitchControl
hinzu.
Verwenden Sie das DecoratedText
-Widget, wenn Sie Informationen einfach und interaktiv präsentieren müssen. Das Widget eignet sich perfekt für Anwendungsfälle wie Kontaktkarten, Updates zum Bestellstatus und Benachrichtigungen zu geschäftlichen Tickets.
Das DecoratedText
-Widget unterstützt die einfache HTML-Textformatierung. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie nur die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, findest du unter Formatierung von Kartentext.
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, aber die Chat-App oder -Karte liefert ein unerwartetes Ergebnis. So kann z. B. keine Kartenmeldung angezeigt werden.
Obwohl eine Fehlermeldung möglicherweise nicht in der Chat-UI angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, um Sie beim Beheben von Fehlern zu unterstützen, wenn das Fehler-Logging für Chat-Apps aktiviert ist. Informationen zum Ansehen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.