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:

Karten-Tool öffnen

Vorbereitung

Eine Google Chat-App, für die interaktive Funktionen aktiviert sind. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie einen der folgenden Schnellstarts aus, der auf der gewünschten App-Architektur basiert:

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

Im Image-Widget wird ein PNG- oder JPG-Bild angezeigt, das über eine 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 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, die eine benutzerdefinierte Funktion ausführt, z. B. einen 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.
  • Für eine optimale Leistung wird eine maximale Bildgröße von 2 MB empfohlen.

Unten sehen Sie eine Karte mit einem Image-Widget. Das Bild der Landingpage der Google Chat-Entwicklerdokumentation wird 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 Styling. 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:

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

  • Mit SQUARE kannst du einen quadratischen Zuschnitt anwenden.
  • Mit CIRCLE können Sie ein kreisförmiges Zuschneiden anwenden.
  • Mit RECTANGLE_CUSTOM können Sie ein rechteckiges Zuschneiden mit einem benutzerdefinierten Seitenverhältnis anwenden. Mit RECTANGLE_4_3 können Sie beispielsweise ein rechteckiges Zuschneiden mit einem Seitenverhältnis von 4:3 anwenden.

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

Figur hinzufügen

Das Icon-Widget steht entweder für ein vorinstalliertes oder ein benutzerdefiniertes Symbol. 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 in einem ButtonList-Widget anzeigen

Die folgende Karte besteht aus einer Icon-Komponente mit einem integrierten Symbol:

In der folgenden Tabelle sind die vordefinierten Symbole aufgeführt, die für Kartennachrichten verfügbar sind:

FLUGZEUG 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 SPEICHERN
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Text zu einer Karte hinzufügen

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

Formatierten Text hinzufügen

Im TextParagraph-Widget wird ein Textabsatz mit optionaler HTML-Formatierung angezeigt. Geben Sie beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags an. Weitere Informationen zu den unterstützten HTML-Tags finden Sie unter Text auf Karten formatieren.

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

  • Fett, unterstrichen oder kursiv formatierten Text mit den HTML-Tags <b>, <u> und <i> anzeigen.
  • 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> Farbe hinzu.

Jedes TextParagraph-Widget wird als neuer Absatz gerendert und kann mit einem HTML-<p>-Tag verglichen werden.

Die folgende Karte besteht aus zwei TextParagraph-Widgets, mit denen zwei Absätze mit einfacher HTML-Formatierung angezeigt werden:

Minimierbaren Textabsatz hinzufügen

Über die minimierbaren Textabsätze können Nutzer auf Wunsch weitere Informationen aufrufen. Dieses Widget eignet sich hervorragend für die Präsentation umfangreicher 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 Funktionen an. Beispiel:

  • Mit startIcon ein icon vor dem Text anzeigen
  • Mit topLabel können Sie einen Titel vor dem Text anzeigen lassen.
  • Mit button können Sie eine anklickbare Schaltfläche und mit switchControl eine umschaltbare Ein/Aus-Schaltfläche hinzufügen.

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

Das DecoratedText-Widget unterstützt die einfache HTML-Formatierung von Text. Geben Sie beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags an. Weitere Informationen zu den unterstützten HTML-Tags finden Sie unter Textformatierung auf Karten.

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 konnte nicht verarbeitet werden“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte führt zu einem unerwarteten Ergebnis. Beispielsweise wird möglicherweise keine Kartennachricht angezeigt.

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