Messages de format

Cette page explique comment les applications Google Chat peuvent mettre en forme le texte pour envoyer des messages contenant l'un des éléments suivants :

  • Texte enrichi contenant des liens hypertextes ou @mentionnant un ou tous les utilisateurs d'un espace Chat.
  • Texte qui s'affiche dans l'interface d'une fiche, y compris sous forme de paragraphe ou de texte d'interface utilisateur qui s'affiche à côté d'une icône, comme un bouton.

Mettre en forme un message

Chat vous permet d'ajouter une mise en forme de base à un message texte, y compris le gras, l'italique et le barré, à l'aide d'un petit sous-ensemble de la syntaxe Markdown. Vous mettez en forme le texte différemment dans les messages texte que dans les messages de carte, car les messages texte sont mis en forme avec la même syntaxe que les utilisateurs de Chat.

Pour mettre en forme des messages texte, utilisez la syntaxe suivante:

Format Symbole Exemple de syntaxe Texte affiché dans Google Chat
Gras * *hello* hello
Italique _ (trait de soulignement) _hello_ bonjour
Barré ~ ~hello~ hello
Police à chasse fixe ` (guillemet arrière) "hello" hello
Bloc à espace unique ` ` ` (trois guillemets simples inversés) ```
Hello
World
```
Hello
World
Liste à puces * ou - (trait d'union) suivi d'un espace

* Il s'agit du premier élément de la liste

* Il s'agit du deuxième élément de la liste.

  • Il s'agit du premier élément de la liste
  • Il s'agit du deuxième élément de la liste

Prenons l'exemple du code JSON suivant:

    {
      "text": "Your pizza delivery *has arrived*!\nThank you for using _Cymbal Pizza!_"
    }

Ce message texte mis en forme affiche ce qui suit dans un espace Chat :

L'application Cymbal Pizza envoie un SMS indiquant que la livraison est arrivée.

Afficher la mise en forme du texte envoyé dans un message

Lorsqu'un utilisateur envoie un message, le corps du message en texte brut se trouve dans le champ text. Une partie de la mise en forme appliquée au message texte à l'aide de la syntaxe Markdown se trouve dans le champ text. La mise en forme supplémentaire se trouve dans le champ formattedText réservé à la sortie, y compris les éléments suivants :

  • Syntaxe Markdown supplémentaire pour le texte
  • Mentions des utilisateurs
  • Liens hypertextes personnalisés
  • Emoji personnalisés

Prenons l'exemple du texte suivant envoyé par un utilisateur :

Message reçu dans Chat avec le mot

Si le message a été mis en forme à l'aide du menu Format de l'interface utilisateur de Chat, le champ text ne contient que le texte, tandis que le champ formattedText contient les balisages, le texte et le lien hypertexte. L'exemple suivant montre le brouillon d'un message texte avec un mot en lien hypertexte, des éléments dans une liste et un mot en gras:

Brouillon de message contenant le mot

Le message est reçu au format suivant :

    {
      "text": "I can meet there at:\nNoon\n3 pm\n5 pm\nWhat time works for you?",
      "formattedText": "I can meet <http://example.com|there> at:\n* Noon\n* 3 pm\n* 5 pm\nWhat time works for *you*?",
    }

Si vous incluez une URL de lien simple dans le texte de votre message, comme http://www.example.com/, Google Chat l'utilise comme texte du lien et crée automatiquement un lien hypertexte vers l'URL spécifiée.

Pour fournir un texte alternatif pour votre lien, utilisez la syntaxe suivante :

Exemple de syntaxe Texte affiché dans Google Chat
<https://example.com|Example website>

La barre verticale et le texte du lien sont facultatifs. <https://www.example.com/> et https://www.example.com/ sont donc équivalents.

Mentionner des utilisateurs dans un message

Les applications Chat peuvent envoyer des SMS qui mentionnent un ou tous les utilisateurs d'un espace Chat. Les applications Chat ne peuvent pas mentionner d'utilisateurs dans un espace en mode importation ni d'utilisateurs qui ne l'ont pas rejoint.

@mentionner des utilisateurs spécifiques

Pour mentionner un utilisateur spécifique, ajoutez <users/{user}> au message, où {user} correspond à l'ID de l'utilisateur. Prenons l'exemple du message texte suivant, où 123456789012345678901 représente l'ID de l'utilisateur Mahan S. :

{
    "text": "A customer has reported an issue. Assigning ticket #942 to <users/123456789012345678901>."
}

Le message texte s'affiche comme suit :

L&#39;application de chat mentionne une personne dans un message.

Vous pouvez spécifier la valeur users/{user} de différentes manières :

  • Si votre application Google Chat répond à un message envoyé par l'utilisateur, vous pouvez utiliser le champ message.sender.name de l'événement d'interaction MESSAGE.
  • Si votre application Google Chat crée un message texte asynchrone, vous pouvez spécifier la valeur de users/{user} de différentes manières :

    • Utilisez le champ name de la ressource Google Chat User, par exemple users/123456789012345678901.
    • Utilisez l'adresse e-mail de l'utilisateur comme alias pour la valeur {user}. Par exemple, si l'adresse e-mail est mahan@example.com, vous pouvez spécifier l'utilisateur comme users/mahan@example.com. Pour utiliser un alias d'adresse e-mail, votre application Google Chat doit s'authentifier en tant qu'utilisateur.
  • Si vous utilisez l'API People, vous pouvez également utiliser la méthode people.get pour identifier l'ID utilisateur.

@mentionner tous les utilisateurs

Pour créer un SMS qui @mentionne tous les membres d'un espace, remplacez {user} par all. L'exemple JSON suivant mentionne tous les utilisateurs dans un message :

{
    "text": "Important message for <users/all>: Code freeze starts at midnight tonight!"
}

Mettre en forme le texte qui apparaît dans les fiches

Dans les fiches, la plupart des champs de texte acceptent la mise en forme de base à l'aide d'un petit sous-ensemble de balises HTML. Vous mettez en forme le texte différemment dans les messages de carte que dans les messages de texte, car les messages de texte sont mis en forme avec la même syntaxe que les utilisateurs de Chat.


Utilisez l'outil de création de cartes pour concevoir et prévisualiser les interfaces utilisateur et de messagerie des applications Chat :

Ouvrir l'outil de création de cartes

Mettre en forme le texte d'un paragraphe

Les balises compatibles et leur objectif sont indiqués dans le tableau suivant :

Format Exemple Résultat affiché
Gras "This is <b>bold</b>." Ce texte est en gras.
Italique "This is <i>italics</i>." Ce texte est en italique.
Souligné "This is <u>underline</u>." Il s'agit du soulignement.
Barré "This is <s>strikethrough</s>." Il s'agit d'un barrage.
Couleur de la police "This is <font color=\"#FF0000\">red font</font>." Il s'agit d'une police rouge.
Lien hypertexte "This is a <a href=\"https://www.google.com\">hyperlink</a>." Il s'agit d'un lien hypertexte.
Temps "This is a time format: <time>2023-02-16 15:00</time>." Il s'agit d'un format d'heure: .
Retour à la ligne "This is the first line. <br> This is a new line." Il s'agit de la première ligne.
Il s'agit d'une nouvelle ligne.

Ajouter des icônes au texte

Pour afficher des icônes à côté du texte dans une fiche, vous pouvez utiliser les widgets DecoratedText et ButtonList.

Les sections suivantes expliquent comment utiliser des icônes intégrées, des icônes Google Material ou des icônes personnalisées dans du texte ou des boutons décorés.

Utiliser les icônes de Chat

Pour utiliser une icône intégrée disponible dans Chat, spécifiez l'une des options suivantes :

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

AVION FAVORIS
BUS VOITURE
HORLOGE CONFIRMATION_NUMBER_ICON
DESCRIPTION DEVISE
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 STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Voici un exemple de carte avec une icône d'e-mail :

Utiliser les icônes Google Material

Vous pouvez utiliser les icônes Google Material pour choisir parmi plus de 2 500 options d'icônes et personnaliser l'épaisseur, le remplissage et la nuance des icônes.

Voici un exemple de fiche avec une icône Google Material :

Utiliser des icônes personnalisées

Pour ajouter une icône personnalisée, incluez le champ iconUrl et spécifiez l'URL correspondante.

Voici un exemple d'icône personnalisée :