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 BuilderPré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:
- Service HTTP avec Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Ajouter 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é le ratio. Par exemple, vous pouvez utiliserRECTANGLE_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 | ||
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 | ||
ÉTOILE | 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:
Ajouter un paragraphe de texte réductible
Les paragraphes de texte réductibles permettent aux utilisateurs de révéler davantage d'informations à la demande. Ce widget est idéal pour présenter du contenu volumineux ou des détails supplémentaires peuvent être explorées lorsqu'elles sont sélectionnées, ce qui crée une interface utilisateur dynamique et interactive expérience.
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 avecstartIcon
. - Affichez un titre avec
topLabel
avant le texte. - Ajoutez un bouton cliquable avec
button
ou un bouton commutable avecswitchControl
.
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
Articles associés
- Consultez des exemples d'applications Chat qui utilisent des fiches et des boîtes de dialogue.
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText