Ajouter du texte et des images à une fiche ou une boîte de dialogue

Cette page explique comment ajouter du texte et des images à une carte ou à un message de boîte de dialogue, et comment modifier leur affichage dans le message.

Utilisez le générateur de cartes pour concevoir et prévisualiser des messages de cartes JSON pour les applications Chat:

Ouvrir Card Builder

Conditions préalables

  • Un compte Google Workspace ayant accès à Google Chat
  • Une application Chat publiée. Pour créer une application Chat, suivez quickstart.

    • Insérer une image

    Le widget Image affiche une image PNG ou JPG hébergée sur une URL HTTPS. La largeur de l'image affichée remplit toute la largeur de la fiche affichée, et sa hauteur s'ajuste pour maintenir le format de l'image. Le widget Image accepte les actions onclick qui se produisent lorsque les utilisateurs cliquent sur l'image. Voici quelques exemples d'actions onclick:

    • Ouvrez un lien hypertexte avec OpenLink, par exemple un lien hypertexte vers la documentation pour les développeurs Google Chat, https://developers.google.com/chat.
    • Exécutez une action qui exécute une fonction personnalisée, telle que l'appel d'une API.

    Le widget Image présente les limites suivantes:

    • Seules les images PNG et JPG sont acceptées.
    • L'URL de l'hôte doit être HTTPS.
    • Pour que les cartes soient performantes, la taille d'image maximale recommandée est de 2 Mo.

    Voici une fiche composée d'un widget Image. Elle affiche l'image de la page de destination de la documentation pour les développeurs Google Chat. Lorsque les utilisateurs cliquent sur l'image, la documentation Google Chat destinée aux développeurs s'ouvre dans un nouvel onglet.

    Ajouter un composant d'image

    Le widget Image est une image dont le style est limité. Un widget imageCompent vous permet d'appliquer cropStyle et borderStyle à une image.

    L'exemple suivant montre deux images dans une grille où l'une des images est recadrée:

    Recadrer une image

    Vous pouvez ajuster la forme d'une image en appliquant un cropStyle. Il existe plusieurs formes à appliquer à une image:

    • Utilisez SQUARE pour appliquer un recadrage carré.
    • Utilisez CIRCLE pour appliquer un recadrage circulaire.
    • Utilisez RECTANGLE_CUSTOM pour appliquer un recadrage rectangulaire avec un format personnalisé. Par exemple, vous pouvez utiliser RECTANGLE_4_3 pour appliquer un recadrage rectangulaire au format 4:3.

    L'exemple suivant montre cinq images dans une grille avec un cropStyle différent appliqué à chaque image:

    Ajouter une icône

    Le widget Icon représente une icône intégrée ou une icône personnalisée. Vous pouvez utiliser Icon dans les messages de fiches et les boîtes de dialogue des manières suivantes:

    • Affichez une icône autonome.
    • Affichez une icône devant le texte associé, dans le cadre d'un widget DecoratedText.
    • Affichez une icône sous la forme d'un bouton interactif, dans le cadre d'un widget ButtonList.

    Voici une carte composée d'un composant Icon avec une icône intégrée:

    Le tableau suivant répertorie les icônes intégrées disponibles pour les messages sous forme de fiches:

    Avion BOOKMARK
    BUS VOITURE
    Horloge CONFIRMATION_NUMBER_ICON
    DESCRIPTION DEVISE
    E-MAIL EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    HÔTEL HOTEL_ROOM_TYPE
    INVITATION MAP_PIN
    SOUSCRIPTION MULTIPLE_PEOPLE
    PERSONNE TÉLÉPHONE
    RESTAURANT_ICON SHOPPING_CART
    ÉTOILE BOUTIQUE
    TICKET TRAIN
    VIDEO_CAMERA VIDEO_PLAY

    Ajouter un paragraphe de texte mis en forme

    Le widget TextParagraph affiche un paragraphe de texte avec une mise en forme HTML facultative. Lorsque vous définissez le contenu textuel de ces widgets, incluez simplement les balises HTML correspondantes. Pour en savoir plus sur les balises HTML compatibles, consultez la section Mise en forme du texte des fiches.

    Par exemple, la mise en forme suivante est disponible pour le texte de paragraphe:

    • Affichez le texte en gras, en italique ou souligné avec les balises HTML <b>, <u> ou <i>.
    • Redirigez les utilisateurs vers des sites Web avec HTML <a href="https://www.google.com">hyperlinks</a>.
    • Ajoutez de la couleur avec HTML <font color="#ea9999">font tags</font>.

    Chaque widget TextParagraph s'affiche sous la forme d'un nouveau paragraphe et peut être considéré comme semblable à une balise <p> HTML.

    Voici une fiche composée de deux widgets TextParagraph permettant d'afficher deux paragraphes avec une mise en forme HTML simple:

    Texte à afficher avec des éléments décoratifs

    Le widget DecoratedText affiche du texte avec une mise en page et des fonctionnalités facultatives. Exemple :

    • Affichez un icon devant le texte avec startIcon.
    • Affichez un titre avec topLabel avant le texte.
    • Ajoutez un bouton cliquable avec button ou un bouton commutable avec switchControl.

    Utilisez le widget DecoratedText lorsque vous devez présenter des informations de manière simple et interactive. Ce widget est idéal pour les cas d'utilisation tels que les fiches de contact, les mises à jour de l'état des commandes et les notifications de tickets de travail.

    Le widget DecoratedText est compatible avec la mise en forme HTML du texte simple. Lorsque vous définissez le contenu textuel de ces widgets, incluez simplement les balises HTML correspondantes. Pour en savoir plus sur les balises HTML compatibles, consultez Mise en forme du texte des fiches.

    Voici une fiche composée d'un widget DecoratedText permettant d'afficher des coordonnées telles que l'adresse e-mail, l'état de connexion, le numéro de téléphone et le site Web:

    Résoudre les problèmes

    Lorsqu'une application ou une fiche Google Chat renvoie une erreur, l'interface Chat affiche le message "Une erreur s'est produite". ou "Impossible de traiter votre demande." Parfois, l'UI Chat n'affiche aucun message d'erreur, mais que l'application ou la fiche Chat produit un résultat inattendu (par exemple, un message de fiche ne s'affiche pas).

    Même s'il est possible qu'un message d'erreur ne s'affiche pas dans l'interface utilisateur de Chat, des messages d'erreur descriptifs et des données de journaux sont disponibles pour vous aider à corriger les erreurs lorsque la journalisation des erreurs est activée pour les applications Chat. Pour obtenir de l'aide concernant l'affichage, le débogage et la correction des erreurs, consultez Dépanner et corriger les erreurs dans Google Chat.