Text und Bilder zu Karten hinzufügen

Auf dieser Seite wird erklärt, wie Sie Karten Text und Bilder hinzufügen und diese 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 eine der folgenden Kurzanleitungen aus, je nachdem, welche App-Architektur Sie verwenden möchten:

Bilder oder Symbole hinzufügen

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

Bild hinzufügen

Image Widget zeigt ein PNG- oder JPG-Bild an, das auf einer HTTPS-URL gehostet wird. Die Breite des angezeigten Bildes entspricht der gesamten Breite der angezeigten Karte. Die Höhe wird so angepasst, dass das Seitenverhältnis des Bildes beibehalten wird. Das Image Widget unterstützt onclick Aktionen , die ausgeführt werden, wenn Nutzer auf das Bild klicken. Beispiele für onclick-Aktionen:

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

  • Nur PNG- und JPG-Bilder werden unterstützt.
  • Die Host-URL muss HTTPS sein.
  • Für eine optimale Leistung von Karten wird eine maximale Bildgröße von 2 MB empfohlen.

Im Folgenden sehen Sie eine Karte, die aus einem Image-Widget besteht. Es zeigt das Bild der Landingpage der Google Chat-Entwicklerdokumentation. 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 begrenzter Formatierung. Mit einem 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 ein cropStyle anwenden. Es gibt verschiedene Formen, die Sie auf ein Bild anwenden können:

  • Verwenden Sie SQUARE, um einen quadratischen Zuschnitt anzuwenden.
  • 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 sind fünf Bilder in einem Raster zu sehen, wobei auf jedes Bild ein anderes 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 als Teil 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
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Text zu einer Karte hinzufügen

In diesem Abschnitt wird erklärt, wie Sie einer Karte Text hinzufügen und diesen 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 ist beispielsweise die folgende Formatierung verfügbar:

  • Fetten, unterstrichenen oder kursiven Text mit den HTML-Tags <b>, <u>, <i> anzeigen.
  • Mit HTML <a href="https://www.google.com">hyperlinks</a> zu Websites verlinken.
  • Mit HTML <font color="#ea9999">font tags</font> Farbe hinzufügen.

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, die aus zwei TextParagraph-Widgets besteht, mit denen zwei Absätze mit einfacher HTML-Formatierung angezeigt werden:

Minimierbaren Textabsatz hinzufügen

Mit minimierbaren Textabsätzen können Nutzer bei Bedarf weitere Informationen aufrufen. Dieses Widget eignet sich perfekt für die Präsentation langer Inhalte oder zusätzlicher Details, die bei Auswahl aufgerufen werden können. So wird eine dynamische und interaktive Nutzererfahrung geschaffen.

Text mit dekorativen Elementen anzeigen

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

  • Mit startIcon ein icon vor dem Text anzeigen.
  • Mit topLabel einen Titel vor dem Text anzeigen.
  • Mit button eine anklickbare Schaltfläche oder mit switchControl einen umschaltbaren Schalter hinzufügen.

Verwenden Sie das Widget DecoratedText, wenn Sie Informationen auf einfache und interaktive Weise präsentieren möchten. Das Widget eignet sich perfekt für Anwendungsfälle wie Visitenkarten, Bestellstatusaktualisierungen und Benachrichtigungen zu Arbeitstickets.

Das Widget DecoratedText 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 Text in Karten formatieren.

Im Folgenden sehen Sie eine Karte, die aus einem DecoratedText-Widget besteht, mit dem Kontaktdaten wie E-Mail-Adresse, Online-Status, 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.“ oder „Ihre Anfrage kann nicht verarbeitet werden.“ angezeigt. Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte liefert ein unerwartetes Ergebnis. Beispielsweise wird möglicherweise keine Kartennachricht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, beschreibende Fehlermeldungen und Logdaten sind verfügbar, mit denen Sie Fehler beheben können, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Aufrufen, Debugging und Beheben von Fehlern finden Sie unter Fehler in Google Chat beheben.