Auf dieser Seite wird erläutert, wie Sie einer Karte oder einem Dialogfeld Text und Bilder hinzufügen. , um die Darstellung von Text und Bildern in der Nachricht zu ändern.
Mit dem Card Builder können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:
Card Builder öffnenVorbereitung
Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App verwenden, führen Sie eine der folgenden Kurzanleitungen aus für die App-Architektur, die Sie verwenden möchten:
- HTTP-Dienst mit Google Cloud Functions
- Google Apps-Skript
- Google Cloud Dialogflow CX
- Cloud Pub/Sub
Bild hinzufügen
Die
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.
Die Höhe wird so angepasst, dass das Seitenverhältnis des Bildes erhalten bleibt. Das Image
-Widget
unterstützt
onclick
Aktionen
wenn Nutzende auf das Bild klicken. Beispiele für onclick
-Aktionen:
- Hyperlink öffnen mit
OpenLink
, etwa einen Hyperlink zur Google Chat-Entwicklerdokumentation,https://developers.google.com/chat
. - Führen Sie einen Aktion zum Ausführen einer benutzerdefinierten Funktion wie dem 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. Es wird die
Bild für die Landingpage der Google Chat-Entwicklerdokumentation. Wenn Nutzende auf das Symbol
Bild, wird die Google Chat-Entwicklerdokumentation in einem neuen Tab geöffnet.
Bildkomponente hinzufügen
Das Image
-Widget ist ein Bild mit eingeschränktem Stil. Eine
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:
Bild zuschneiden
Sie können die Form eines Bildes anpassen, indem Sie
cropStyle
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 Aspekt anzuwenden Seitenverhältnis. Du kannst beispielsweiseRECTANGLE_4_3
verwenden, um einen rechteckigen Ausschnitt zuzuschneiden. mit einem Seitenverhältnis von 4:3.
Das folgende Beispiel zeigt fünf Bilder in einem Raster mit einem anderen cropStyle
auf jedes Bild angewendet:
Figur hinzufügen
Die
Icon
-Widget
steht entweder für
integriert
oder
benutzerdefiniert
. Sie können Icon
verwenden in
Kartennachrichten
und
Dialogfelder
auf folgende Arten:
- Ein eigenständiges Symbol anzeigen.
- Anzeige eines Symbols vor einem verwandten Text als Teil eines
DecoratedText
-Widget. - Darstellung eines Symbols als interaktive Schaltfläche als Teil eines
ButtonList
-Widget.
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 | Lesezeichen | ||
BUS | Automobil | ||
UHR | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | DOLLAR | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
MITGLIEDSCHAFT | MULTIPLE_PEOPLE | ||
PERSON | SMARTPHONE | ||
RESTAURANT_ICON | SHOPPING_CART | ||
STAR | SHOP | ||
TICKET | TRAINING | ||
VIDEO_CAMERA | VIDEO_PLAY |
Einen Absatz mit formatiertem Text hinzufügen
Die
TextParagraph
-Widget
zeigt einen Textabschnitt mit optionaler HTML-Formatierung an. Beim Festlegen
den Textinhalt dieser Widgets, fügen Sie einfach die entsprechenden HTML-Tags ein.
Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter
Formatierung des Kartentexts:
Für Absatztexte sind beispielsweise folgende Formatierungen verfügbar:
- Text fett, unterstrichen oder kursiv mit HTML
<b>
,<u>
,<i>
anzeigen Tags. - 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.
ähnlich wie ein HTML-<p>
-Tag.
Die folgende Karte besteht aus zwei TextParagraph
-Widgets, mit denen
zwei Absätze mit einfacher HTML-Formatierung anzeigen:
Anzeigetext mit dekorativen Elementen
Die
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 in einem
einfach zu nutzen und interaktiv sein. Das Widget eignet sich perfekt für
Kontaktkarten, Updates zum Bestellstatus und Benachrichtigungen zu geschäftlichen Tickets.
Das DecoratedText
-Widget unterstützt die einfache HTML-Textformatierung. Beim Festlegen
den Textinhalt dieser Widgets, fügen Sie einfach die entsprechenden HTML-Tags ein. Für
Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter
Formatierung des Kartentexts:
Die folgende Karte besteht aus einem DecoratedText
-Widget, mit dem
Kontaktdaten wie E-Mail-Adresse, Onlinestatus, Telefonnummer und
Website:
Fehlerbehebung
Wenn eine Google Chat-App oder card gibt einen Fehler zurück. Der Parameter In der Chatoberfläche wird die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal kann die Chat-UI Es wird zwar keine Fehlermeldung angezeigt, aber die Chat-App oder die Karte zu einem unerwarteten Ergebnis führt. z. B. wird eine Kartennachricht angezeigt werden.
Auch wenn in der Chat-Benutzeroberfläche möglicherweise keine Fehlermeldung angezeigt wird, beschreibende Fehlermeldungen und Protokolldaten stehen zur Fehlerbehebung zur Verfügung. wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Hilfe bei der Anzeige: Debugging und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben