Cette page explique comment ajouter du texte et des images à une fiche ou un message de boîte de dialogue, et comment modifier leur affichage.
Créez et prévisualisez des fiches avec Card Builder.
Ouvrez l'outil de création de cartesPrérequis
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 occupe toute la largeur de la fiche affichée, et sa hauteur s'ajuste pour maintenir le format de l'image. Le widget Image prend en charge 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écuter 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 pour les 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 où l'une des images est recadrée:
Recadrer une image
Vous pouvez ajuster la forme d'une image en appliquant un élément cropStyle.
Plusieurs formes peuvent être appliquées à une image:
- Utilisez
SQUAREpour appliquer un recadrage carré. - Utilisez
CIRCLEpour appliquer un recadrage circulaire. - Utilisez
RECTANGLE_CUSTOMpour appliquer un recadrage rectangulaire avec un format personnalisé. Par exemple, vous pouvez utiliserRECTANGLE_4_3pour 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 associés à une fiche et les boîtes de dialogue de différentes manières:
- Afficher une icône autonome.
- Afficher une icône devant le texte associé, dans un widget
DecoratedText. - Afficher une icône en tant que bouton interactif dans un widget
ButtonList.
Voici une fiche composée d'un composant Icon avec une icône intégrée:
Le tableau suivant liste les icônes intégrées disponibles pour les messages avec fiche:
| Avion | BOOKMARK | ||
| BUS | VOITURE | ||
| Horloge | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | DOLLAR | ||
| 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 | ||
| AJOUTER AUX FAVORIS | BOUTIQUE | ||
| BILLET | 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 acceptées, consultez la section Mise en forme du texte des fiches.
Par exemple, la mise en forme suivante est disponible pour le texte d'un paragraphe:
- Affichez du texte en gras, souligné ou en italique avec les balises HTML
<b>,<u>et<i>. - Lien vers des sites Web avec
<a href="https://www.google.com">hyperlinks</a>HTML. - Ajoutez de la couleur avec le code HTML
<font color="#ea9999">font tags</font>.
Chaque widget TextParagraph s'affiche comme un nouveau paragraphe et peut être considéré comme une balise HTML <p>.
La fiche suivante est composée de deux widgets TextParagraph utilisés pour afficher deux paragraphes avec une mise en forme HTML simple:
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 :
- Affichez un
icondevant le texte avecstartIcon. - Affichez un titre avant le texte avec
topLabel. - Ajoutez un bouton cliquable avec
buttonou un bouton bascule commutable avecswitchControl.
Utilisez le widget DecoratedText lorsque vous devez présenter des informations de manière simple et interactive. 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 tickets de travail.
Le widget DecoratedText accepte la mise en forme HTML de 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 acceptées, consultez la section Mise en forme du texte des fiches.
La fiche suivante est constitué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:
Dépannage
Lorsqu'une application ou une fiche Google Chat renvoie une erreur, l'interface Chat affiche un message indiquant "Un problème est survenu" ou "Impossible de traiter votre demande". Il peut arriver que l'interface Chat n'affiche aucun message d'erreur, mais que l'application ou la fiche Chat génère un résultat inattendu. Par exemple, il est possible qu'un message de fiche ne s'affiche pas.
Bien qu'aucun message d'erreur ne s'affiche dans l'interface 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 est activée pour les applications Chat. Si vous avez besoin d'aide pour afficher, déboguer et corriger les erreurs, consultez Résoudre les erreurs Google Chat.