Text und Bilder zu Karten hinzufügen

Auf dieser Seite wird erläutert, wie Sie Text und Bilder zu Karten 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 Nutzerinteraktionen empfangen und darauf reagieren kann. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie eine der folgenden Kurzanleitungen aus, je nachdem, welche Anwendungsarchitektur Sie verwenden möchten:

Bilder oder Symbole hinzufügen

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

Bild hinzufügen

Das Image-Widget zeigt ein PNG- oder JPG-Bild an, das auf einer HTTPS-URL gehostet wird. Die Breite des angezeigten Bildes füllt die gesamte Breite der angezeigten Karte aus. Die Höhe wird so angepasst, dass das Seitenverhältnis des Bildes beibehalten wird. Das Widget Image 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.
  • Eine Aktion ausführen, die eine benutzerdefinierte Funktion ausführt, z. B. einen API-Aufruf.

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

  • Es werden nur PNG- und JPG-Bilder unterstützt.
  • Die Host-URL muss HTTPS sein.
  • Damit die Karten schnell geladen werden, 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 Widget Image ist ein Bild mit eingeschränktem Styling. Mit einem ImageComponent-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:

Sie können die Form einer Bildkomponente anpassen, indem Sie eine cropStyle anwenden. Es gibt mehrere Formen, die auf ein Bild angewendet werden können:

  • Verwenden Sie SQUARE, um das Bild quadratisch zuzuschneiden.
  • Verwenden Sie CIRCLE, um einen kreisförmigen Zuschnitt anzuwenden.
  • Verwenden Sie RECTANGLE_CUSTOM, um einen rechteckigen Zuschnitt mit einem benutzerdefinierten Seitenverhältnis anzuwenden. Sie können beispielsweise RECTANGLE_4_3 verwenden, um einen rechteckigen Zuschnitt mit einem Seitenverhältnis von 4:3 anzuwenden.

Im folgenden Beispiel sehen Sie fünf Bilder in einem Raster, wobei auf jedes Bild 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 tun:

  • Ein eigenständiges Symbol anzeigen.
  • Ein Symbol vor dem zugehörigen Text als Teil eines DecoratedText-Widgets anzeigen.
  • Ein Symbol als interaktive Schaltfläche im Rahmen eines ButtonList-Widgets 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 Kartennachrichten verfügbar sind:

AIRPLANE BOOKMARK
BUS CAR
UHR CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL 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 Text in einer Karte hinzufügen und formatieren.

Absatz mit formatiertem Text hinzufügen

Das TextParagraph-Widget zeigt einen Textabsatz mit optionaler HTML-Formatierung an. 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 sind beispielsweise die folgenden Formatierungen verfügbar:

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

Jedes TextParagraph-Widget wird als neuer Absatz gerendert und ähnelt einem HTML-<p>-Tag.

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

Minimierbaren Textabsatz hinzufügen

Über die minimierbaren Textabsätze können Nutzer bei Bedarf weitere Informationen einblenden. Dieses Widget eignet sich perfekt für die Darstellung langer Inhalte oder zusätzlicher Details, die bei Auswahl angezeigt werden können. So entsteht eine dynamische und interaktive Nutzererfahrung.

Text mit dekorativen Elementen anzeigen

Das DecoratedText-Widget zeigt Text mit optionalem Layout und optionalen Funktionen an. Beispiel:

  • Vor dem Text mit startIcon wird ein icon angezeigt.
  • Mit topLabel einen Titel vor dem Text anzeigen.
  • Fügen Sie mit button eine anklickbare Schaltfläche oder mit switchControl einen umschaltbaren Schalter hinzu.

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

Das Widget DecoratedText unterstützt einfache HTML-Textformatierungen. 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 Karten-Textformatierung.

Im Folgenden sehen Sie eine Karte, die aus einem DecoratedText-Widget besteht, 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 auf der Chat-Oberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte liefert ein unerwartetes Ergebnis. Beispielsweise wird eine Kartennachricht möglicherweise nicht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche möglicherweise keine Fehlermeldung angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, mit denen Sie Fehler beheben können, wenn das Fehler-Logging für Chat-Apps aktiviert ist. Hilfe zum Anzeigen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.