Text und Bilder zu Karten hinzufügen

Auf dieser Seite erfahren Sie, 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 JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:

Card Builder öffnen

Vorbereitung

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:

Bilder oder Symbole hinzufügen

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

Bild hinzufügen

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:

Sie können die Form einer Bildkomponente anpassen, indem Sie eine 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 beispielsweise RECTANGLE_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 . Symbole werden Karten hinzugefügt, um eine der folgenden Aktionen auszuführen:

  • 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
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 SHOP
TICKET TRAINING
VIDEO_CAMERA VIDEO_PLAY

Einer Karte Text hinzufügen

In diesem Abschnitt wird erläutert, wie Sie einer Karte Text hinzufügen und formatieren.

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 Formatieren Sie Text, der in Karten angezeigt wird.

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:

Absatz mit minimierbarem Text hinzufügen

In den minimierbaren Textabschnitten können Nutzer bei Bedarf weitere Informationen einblenden. Mit diesem Widget können Sie längere Inhalte oder zusätzliche Details präsentieren, können erkundet werden. Dadurch entsteht ein dynamischer und interaktiver Nutzererfahrung.

Anzeigetext mit dekorativen Elementen

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

  • icon mit startIcon 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 mit switchControl 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