Einer Karte oder einem Dialogfeld Text und Bilder hinzufügen

Auf dieser Seite wird erläutert, wie Sie einer Karte oder einem Dialogfeld Text und Bilder hinzufügen. , um die Darstellung von Text und Bildern in der Nachricht zu ändern.

Mit dem Card Builder können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:

Card Builder öffnen

Vorbereitung

  • Ein Google Workspace-Konto mit Zugriff auf Google Chat:
  • Eine veröffentlichte Chat-App Um eine Chat-App, folgen Schnellstart

    • Bild hinzufügen

    Die 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:

    Bild zuschneiden

    Sie können die Form eines Bildes anpassen, indem Sie 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 . Sie können Icon verwenden in Kartennachrichten und Dialogfelder auf folgende Arten:

    • 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
    INVITE MAP_PIN
    MITGLIEDSCHAFT MULTIPLE_PEOPLE
    PERSON SMARTPHONE
    RESTAURANT_ICON SHOPPING_CART
    STAR SHOP
    TICKET TRAINING
    VIDEO_CAMERA VIDEO_PLAY

    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 Formatierung des Kartentexts:

    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:

    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 erscheinen.

    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