Einer Karte oder einem Dialogfeld Text und Bilder hinzufügen

Auf dieser Seite wird erläutert, wie Sie einer Karte oder einer Dialognachricht Text und Bilder hinzufügen und die Darstellung von Text und Bildern in der Mitteilung ändern.


Mit dem Card Builder kannst du Karten entwerfen und sie dir als Vorschau ansehen.

Den Card Builder öffnen

Voraussetzungen

  • Ein Google Workspace-Konto mit Zugriff auf Google Chat.
  • Eine veröffentlichte Chat-App. Folgen Sie dieser quickstart, um eine Chat-App zu erstellen.
  • Bild hinzufügen

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

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

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

    Die folgende Karte besteht aus einem Image-Widget. Es zeigt das Landingpage-Bild der Google Chat-Entwicklerdokumentation. Wenn Nutzer auf das Bild klicken, wird die Entwicklerdokumentation für Google Chat in einem neuen Tab geöffnet.

    Bildkomponente hinzufügen

    Das Image-Widget ist ein Bild mit eingeschränktem Stil. Mit einem imageCompent-Widget können Sie cropStyle und borderStyle auf ein Image anwenden.

    Das folgende Beispiel zeigt zwei Bilder in einem Raster, in dem eines der Bilder zugeschnitten ist:

    Bilder zuschneiden

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

    • Mit SQUARE kannst du einen quadratischen Zuschnitt vornehmen.
    • Verwende CIRCLE, um das Bild kreisförmig zuzuschneiden.
    • Verwende RECTANGLE_CUSTOM, um einen rechteckigen Ausschnitt mit einem benutzerdefinierten Seitenverhältnis zuzuschneiden. Du kannst beispielsweise RECTANGLE_4_3 verwenden, um einen rechteckigen Zuschnitt mit einem Seitenverhältnis von 4:3 vorzunehmen.

    Das folgende Beispiel zeigt fünf Bilder in einem Raster, wobei auf jedes Bild eine andere cropStyle angewendet wird:

    Figur hinzufügen

    Das Icon-Widget ist entweder ein integriertes Symbol oder ein benutzerdefiniertes Symbol. Du kannst Icon auf folgende Arten in Kartennachrichten und Dialogfeldern verwenden:

    • Ein eigenständiges Symbol anzeigen
    • Zeigt ein Symbol vor zugehörigem Text als Teil eines DecoratedText-Widgets an.
    • Darstellung eines Symbols als interaktive Schaltfläche im Rahmen eines ButtonList-Widgets

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

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

    FLUG BOOKMARK
    BUS Auto
    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
    Stern GESCHÄFT
    TICKET TRAIN
    VIDEO_CAMERA VIDEO_PLAY

    Einen Absatz mit formatiertem Text hinzufügen

    Das TextParagraph-Widget zeigt einen Textabschnitt mit optionaler HTML-Formatierung an. Füge beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter Formatierung von Kartentexten.

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

    • Fett formatierten, unterstrichenen oder kursiv formatierten Text mit HTML-Tags vom Typ <b>, <u> oder <i> verwenden.
    • Verlinke Websites mit HTML <a href="https://www.google.com">hyperlinks</a>.
    • Fügen Sie mit dem HTML-Code <font color="#ea9999">font tags</font> Farbe hinzu.

    Jedes TextParagraph-Widget wird als ein neuer Absatz gerendert und kann sich wie ein HTML-<p>-Tag vorstellen.

    Die folgende Karte besteht aus zwei TextParagraph-Widgets für zwei Absätze mit einfacher HTML-Formatierung:

    Anzeigetext mit dekorativen Elementen

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

    • Blende icon vor dem Text mit startIcon ein.
    • Vor dem Text einen Titel mit topLabel anzeigen.
    • Fügen Sie eine anklickbare Schaltfläche mit button oder eine umschaltbare Ein/Aus-Schaltfläche mit switchControl hinzu.

    Mit dem DecoratedText-Widget können Sie Informationen einfach und interaktiv präsentieren. Das Widget ist ideal für Anwendungsfälle wie Kontaktkarten, Benachrichtigungen zum Bestellstatus und Benachrichtigungen zu Arbeitstickets.

    Das DecoratedText-Widget unterstützt die einfache HTML-Textformatierung. Füge beim Festlegen des Textinhalts dieser Widgets einfach die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, finden Sie unter Formatierung von Kartentexten.

    Die folgende Karte besteht aus einem DecoratedText-Widget, mit dem Kontaktdetails wie E-Mail-Adresse, Onlinestatus, Telefonnummer und Website angezeigt werden:

    Fehlerbehebung

    Wenn eine Google Chat-App oder Google Chat-Karte einen Fehler zurückgibt, wird in der Chat-Oberflä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 führt zu einem unerwarteten Ergebnis, z. B. dass keine Kartennachricht angezeigt wird.

    Obwohl eine Fehlermeldung möglicherweise nicht in der Chat-Benutzeroberfläche angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, mit denen Sie Fehler beheben können, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Aufrufen, Debuggen und Beheben von Fehlern finden Sie im Hilfeartikel Google Chat-Fehler beheben.