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 können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:

Card Builder öffnen

Voraussetzungen

  • Ein Google Workspace-Konto mit Zugriff auf Google Chat.
  • Eine veröffentlichte Chat-App. Informationen zum Erstellen einer Chat-App finden Sie in dieser quickstart.

    • Bild hinzufügen

    Das 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 und seine Höhe wird so angepasst, dass das Seitenverhältnis des Bilds erhalten bleibt. Das Image-Widget unterstützt onclick-Aktionen, die stattfinden, wenn Nutzer auf das Bild klicken. Beispiele für onclick-Aktionen:

    • Öffnen Sie einen Hyperlink mit OpenLink, etwa 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. das 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. Hier wird das Landingpage-Bild 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 Image-Widget ist ein Bild mit eingeschränktem Stil. 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:

    Bild zuschneiden

    Sie können die Form eines Bildes mit einem cropStyle anpassen. 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 Seitenverhältnis anzuwenden. Du kannst beispielsweise RECTANGLE_4_3 verwenden, um einen rechteckigen Ausschnitt mit einem Seitenverhältnis von 4:3 zu erstellen.

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

    Figur hinzufügen

    Das Icon-Widget ist entweder ein integriertes oder ein benutzerdefiniertes Symbol. Sie können Icon auf folgende Arten in Kartennachrichten und Dialogfeldern verwenden:

    • Ein eigenständiges Symbol anzeigen.
    • Hiermit kannst du ein Symbol vor zugehörigem Text als Teil eines DecoratedText-Widgets anzeigen lassen.
    • Hiermit kannst du ein Symbol als interaktive Schaltfläche als Teil eines ButtonList-Widgets anzeigen.

    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 BOOKMARK
    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
    STERNE SHOP
    TICKET TRAIN
    VIDEO_CAMERA VIDEO_PLAY

    Einen Absatz mit formatiertem Text hinzufügen

    Das TextParagraph-Widget zeigt einen Textabschnitt mit optionaler HTML-Formatierung an. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie nur die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, findest du unter Formatierung von Kartentext.

    Für Absatztexte sind beispielsweise folgende Formatierungen verfügbar:

    • Text fett, unterstrichen oder kursiv mit den HTML-Tags <b>, <u> und <i> anzeigen.
    • 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 und kann einem HTML-<p>-Tag ähneln.

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

    Anzeigetext mit dekorativen Elementen

    Das 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 einfach und interaktiv präsentieren müssen. Das Widget eignet sich perfekt für Anwendungsfälle wie Kontaktkarten, Updates zum Bestellstatus und Benachrichtigungen zu geschäftlichen Tickets.

    Das DecoratedText-Widget unterstützt die einfache HTML-Textformatierung. Wenn Sie den Textinhalt dieser Widgets festlegen, fügen Sie nur die entsprechenden HTML-Tags ein. Weitere Informationen dazu, welche HTML-Tags unterstützt werden, findest du unter Formatierung von Kartentext.

    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 -Karte einen Fehler zurückgibt, wird in der Chat-Oberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal wird in der Chat-UI keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte liefert ein unerwartetes Ergebnis. So kann z. B. keine Kartenmeldung angezeigt werden.

    Obwohl eine Fehlermeldung möglicherweise nicht in der Chat-UI angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, um Sie beim Beheben von Fehlern zu unterstützen, wenn das Fehler-Logging für Chat-Apps aktiviert ist. Informationen zum Ansehen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.