Text und Bilder zu Karten hinzufügen

Auf dieser Seite wird beschrieben, wie Sie Karten Text und Bilder hinzufügen und formatieren.

Weitere Informationen zum Erstellen von Karten finden Sie unter Karten für Google Chat-Apps erstellen.

Mit dem Card Builder können Sie Nachrichten und Benutzeroberflächen für Chat-Apps entwerfen und in der Vorschau ansehen:

Card Builder öffnen

Vorbereitung

Eine Google Chat-App, die so konfiguriert ist, dass sie Interaktionsereignisse empfängt und darauf reagiert. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie einen der folgenden Schnellstarts aus, je nachdem, welche App-Architektur Sie verwenden möchten:

Bilder oder Symbole hinzufügen

In diesem Abschnitt wird beschrieben, wie Sie Karten visuelle Elemente wie Bilder, Bildkomponenten und Symbole hinzufügen.

Bild hinzufügen

Im Image-Widget wird ein PNG- oder JPG-Bild angezeigt, das unter einer HTTPS-URL gehostet wird. Die Breite des angezeigten Bilds entspricht der gesamten Breite der angezeigten Karte. Die Höhe wird so angepasst, dass das Seitenverhältnis des Bilds beibehalten wird. 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-Entwicklerdokumentation, https://developers.google.com/chat.
  • Führen Sie eine Aktion aus, mit der eine benutzerdefinierte Funktion ausgeführt wird, z. B. ein API-Aufruf.

Für das Image-Widget gelten die folgenden Einschränkungen:

  • Es werden nur PNG- und JPG-Bilder unterstützt.
  • Die Host-URL muss HTTPS lauten.
  • Damit die Karten eine gute Leistung bieten, wird eine maximale Bildgröße von 2 MB empfohlen.

Im Folgenden sehen Sie eine Karte, die aus einem Image-Widget besteht. Es wird das Bild der Landingpage 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änkter Formatierung. Mit dem imageCompent-Widget können Sie cropStyle und borderStyle auf ein Bild anwenden.

Im folgenden Beispiel sind zwei Bilder in einem Raster zu sehen, wobei eines der Bilder zugeschnitten ist:

Sie können die Form einer Bildkomponente anpassen, indem Sie eine cropStyle anwenden. Sie können ein Bild in verschiedenen Formen darstellen:

  • Verwenden Sie SQUARE, um einen quadratischen Zuschnitt anzuwenden.
  • Mit CIRCLE können Sie einen kreisförmigen Zuschnitt anwenden.
  • Verwenden Sie RECTANGLE_CUSTOM, um einen rechteckigen Zuschnitt mit einem benutzerdefinierten Seitenverhältnis anzuwenden. Mit RECTANGLE_4_3 können Sie beispielsweise einen rechteckigen Zuschnitt mit einem Seitenverhältnis von 4:3 anwenden.

Im folgenden Beispiel sind fünf Bilder in einem Raster zu sehen, auf die jeweils ein anderer cropStyle angewendet wurde:

Figur hinzufügen

Das Icon-Widget stellt entweder ein integriertes oder ein benutzerdefiniertes Symbol dar. Sie können Karten Symbole hinzufügen, um Folgendes zu erreichen:

  • Ein eigenständiges Symbol anzeigen
  • Ein Symbol vor dem zugehörigen Text in einem DecoratedText-Widget anzeigen.
  • Ein Symbol als interaktive Schaltfläche in einem ButtonList-Widget anzeigen

Im Folgenden sehen Sie 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 Kartenmitteilungen verfügbar sind:

AIRPLANE LESEZEICHEN
BUS CAR
UHR CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
EINLADEN MAP_PIN
MITGLIEDSCHAFT MULTIPLE_PEOPLE
PERSON SMARTPHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Text zu einer Karte hinzufügen

In diesem Abschnitt wird beschrieben, wie Sie einer Karte Text hinzufügen und ihn formatieren.

Absatz mit formatiertem Text hinzufügen

Mit dem TextParagraph-Widget wird ein Textabsatz mit optionaler HTML-Formatierung angezeigt. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie einfach die entsprechenden HTML-Tags ein. Weitere Informationen zu den unterstützten HTML-Tags finden Sie unter Text in Karten formatieren.

Für Absatztext ist beispielsweise die folgende Formatierung verfügbar:

  • Sie können Text mit den HTML-Tags <b>, <u> und <i> fett, unterstrichen oder kursiv darstellen.
  • Mit HTML <a href="https://www.google.com">hyperlinks</a> können Sie Links zu Websites erstellen.
  • Fügen Sie mit HTML <font color="#ea9999">font tags</font> etwas Farbe hinzu.

Jedes TextParagraph-Widget wird als neuer Absatz gerendert und kann als ähnlich wie ein HTML-<p>-Tag betrachtet werden.

Im Folgenden sehen Sie eine Karte mit zwei TextParagraph-Widgets, mit denen zwei Absätze mit einfacher HTML-Formatierung angezeigt werden:

Minimierbaren Textabsatz hinzufügen

Durch die einklappbaren Textabsätze können Nutzer bei Bedarf weitere Informationen aufrufen. Dieses Widget eignet sich hervorragend, um längere Inhalte oder zusätzliche Details zu präsentieren, die bei Auswahl angezeigt werden. So wird eine dynamische und interaktive Nutzererfahrung geschaffen.

Text mit dekorativen Elementen anzeigen

Im DecoratedText-Widget wird Text mit optionalem Layout und optionalen Funktionen angezeigt. Beispiel:

  • Zeige ein icon vor dem Text mit startIcon an.
  • Mit topLabel können Sie vor dem Text einen Titel einfügen.
  • Fügen Sie mit button eine anklickbare Schaltfläche oder mit switchControl einen Schalter hinzu.

Verwenden Sie das DecoratedText-Widget, wenn Sie Informationen auf einfache und interaktive Weise präsentieren möchten. Das Widget eignet sich perfekt für Anwendungsfälle wie Kontaktkarten, Aktualisierungen des Bestellstatus und Benachrichtigungen zu Arbeitsaufträgen.

Das DecoratedText-Widget unterstützt die einfache HTML-Formatierung von Text. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie einfach die entsprechenden HTML-Tags ein. Weitere Informationen zu den unterstützten HTML-Tags finden Sie unter Kartenformatierung.

Die folgende Karte besteht aus einem DecoratedText-Widget, mit dem Kontaktdaten 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-Benutzeroberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht bearbeitet werden.“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder ‑Karte liefert ein unerwartetes Ergebnis, z. B. wird eine Kartennachricht nicht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, sind aussagekräftige Fehlermeldungen und Protokolldaten verfügbar, die Ihnen helfen, Fehler zu beheben, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Aufrufen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.