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. pour modifier l'affichage du texte et des images 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

Prérequis

Une application Google Chat avec des fonctionnalités interactives. Pour créer un interactive, suivez l'un des guides de démarrage rapide suivants sur l'architecture de l'application que vous souhaitez utiliser:

Insérer une image

La Widget Image affiche une image PNG ou JPG hébergée sur une URL HTTPS. La largeur de l'image affichée occupe toute la largeur de la carte affichée. sa hauteur s'ajuste pour conserver le format de l'image. Widget Image compatible avec onclick actions qui se produisent lorsque les utilisateurs cliquent sur l'image. Voici quelques exemples d'actions onclick:

  • Ouvrir un lien hypertexte avec OpenLink, tel qu'un lien hypertexte vers la documentation Google Chat destinée aux développeurs, https://developers.google.com/chat
  • Lancez une action qui exécute une fonction personnalisée, comme appeler 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. Il affiche Image de la page de destination de la documentation pour les développeurs Google Chat. Lorsque les utilisateurs cliquent la documentation pour les développeurs Google Chat s'ouvre dans un nouvel onglet.

Ajouter un composant d'image

Le widget Image est une image dont le style est limité. Une 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é:

Recadrer une image

Vous pouvez ajuster la forme d'une image en appliquant une méthode cropStyle Il existe plusieurs formes à appliquer à une image:

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

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

Ajouter une icône

La Widget Icon représente intégrée icône ou personnalisée . Vous pouvez utiliser Icon dans messages sous forme de fiches et boîtes de dialogue comme suit:

  • Affichez une icône autonome.
  • Afficher une icône devant le texte associé, dans le cadre d'une Widget DecoratedText.
  • afficher 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 Favori
BUS VOITURE
Horloge CONFIRMATION_NUMBER_ICON
DESCRIPTION DEVISE
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HÔTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
SOUSCRIPTION MULTIPLE_PEOPLE
PERSONNE TÉLÉPHONE
RESTAURANT_ICON SHOPPING_CART
STAR BOUTIQUE
TICKET ENTRAÎNEMENT
VIDEO_CAMERA VIDEO_PLAY

Ajouter un paragraphe de texte mis en forme

La Widget TextParagraph affiche un paragraphe de texte avec la mise en forme HTML facultative. Lors de la configuration le contenu textuel de ces widgets, il vous suffit d'inclure les balises HTML correspondantes. Pour en savoir plus sur les balises HTML compatibles, consultez Mise en forme du texte de la fiche :

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

  • Afficher le texte en gras, en italique ou souligné avec 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 comme un nouveau paragraphe et peut être considéré est semblable à une balise HTML <p>.

Voici une fiche composée de deux widgets TextParagraph utilisés pour afficher deux paragraphes avec une mise en forme HTML simple:

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

La 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 dans un de manière interactive et facile à utiliser. Ce widget est idéal pour les cas d'utilisation 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. Lors de la configuration le contenu textuel de ces widgets, il vous suffit d'inclure les balises HTML correspondantes. Pour pour en savoir plus sur les balises HTML acceptées, consultez Mise en forme du texte de la fiche :

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

Résoudre les problèmes

Lorsqu'une application ou card renvoie une erreur, la L'interface Chat affiche le message "Une erreur s'est produite". ou "Impossible de traiter votre demande." Parfois, l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la carte produit un résultat inattendu. Par exemple, un message de fiche peut ne pas s'affichent.

Même s'il est possible qu'aucun message d'erreur ne s'affiche 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, le débogage et la correction des erreurs, consultez Résoudre les problèmes liés à Google Chat