Ajouter du texte et des images aux fiches

Cette page explique comment ajouter et mettre en forme du texte et des images dans des fiches.

Pour en savoir plus sur la création de fiches, consultez la section Créer des fiches pour les applications Google Chat.

Utilisez Card Builder pour concevoir et prévisualiser les interfaces de messagerie et utilisateur des applications Chat:

Ouvrir l'outil de création de cartes

Prérequis

Une application Google Chat pour laquelle les fonctionnalités interactives sont activées. Pour créer une application Chat interactive, suivez l'un des guides de démarrage rapide suivants en fonction de l'architecture de l'application que vous souhaitez utiliser:

Ajouter des images ou des icônes

Cette section explique comment ajouter des éléments visuels aux fiches, tels que des images, des composants d'image et des icônes.

Ajouter 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 occupe toute la largeur de la fiche affichée, et sa hauteur s'ajuste pour conserver les proportions de l'image. Le widget Image est compatible avec 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 Google Chat pour les développeurs, https://developers.google.com/chat.
  • Exécutez une action qui exécute une fonction personnalisée, comme 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 garantir des fiches performantes, nous vous recommandons de ne pas dépasser 2 Mo pour la taille des images.

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

Ajouter un composant 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, dont l'une est recadrée:

Vous pouvez ajuster la forme d'un composant Image en appliquant un cropStyle. Vous pouvez appliquer plusieurs formes à 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 ajouter des icônes aux fiches pour effectuer l'une des opérations suivantes:

  • Afficher une icône autonome.
  • Afficher une icône devant du texte associé, dans le cadre d'un widget DecoratedText.
  • Affichez une icône en tant que bouton interactif, dans le cadre d'un widget ButtonList.

Voici une fiche 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 de carte:

AVION BOOKMARK
BUS CAR
HORLOGE CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITER MAP_PIN
ABONNEMENT MULTIPLE_PEOPLE
PERSON TÉLÉPHONE
RESTAURANT_ICON SHOPPING_CART
STAR MAGASIN
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Ajouter du texte à une fiche

Cette section explique comment ajouter et mettre en forme du texte dans une fiche.

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, il vous suffit d'inclure les balises HTML correspondantes. Pour en savoir plus sur les balises HTML acceptées, consultez la section Mettre en forme le texte qui s'affiche dans les fiches.

Par exemple, la mise en forme suivante est disponible pour le texte des paragraphes:

  • Afficher du texte en gras, en souligné ou en italique avec les balises HTML <b>, <u> et <i>.
  • Liens vers des sites Web avec le code HTML <a href="https://www.google.com">hyperlinks</a>.
  • Ajoutez de la couleur avec le code 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 HTML <p>.

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

Ajouter un paragraphe de texte réductible

Les paragraphes de texte réductibles permettent aux utilisateurs d'afficher plus d'informations s'ils le souhaitent. Ce widget est idéal pour présenter des contenus longs ou des détails supplémentaires qui peuvent être explorés quand ils sont sélectionnés. Il crée une expérience utilisateur dynamique et interactive.

Afficher du texte avec des éléments décoratifs

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

  • Afficher un icon devant le texte avec startIcon.
  • Afficher un titre avant le texte avec topLabel.
  • Ajoutez un bouton cliquable avec button ou un bouton d'activation avec switchControl.

Utilisez le widget DecoratedText lorsque vous devez présenter des informations de manière interactive et facile à consommer. Le 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 demandes de service.

Le widget DecoratedText accepte la mise en forme HTML du texte simple. Lorsque vous définissez le contenu textuel de ces widgets, il vous suffit d'inclure les balises HTML correspondantes. Pour en savoir plus sur les balises HTML acceptées, consultez la section Mise en forme du texte de la fiche.

Voici une fiche composée d'un widget DecoratedText utilisé pour afficher les coordonnées, telles que l'adresse e-mail, l'état en ligne, 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 "Un problème s'est produit". ou "Impossible de traiter votre demande". Il arrive que l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la fiche Chat produise un résultat inattendu. Par exemple, un message de fiche peut ne pas s'afficher.

Bien 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 journal sont disponibles pour vous aider à corriger les erreurs lorsque la journalisation des erreurs pour les applications Chat est activée. Pour savoir comment afficher, déboguer et corriger les erreurs, consultez Résoudre et corriger les erreurs Google Chat.