Cette page a été traduite par l'API Cloud Translation.

Prévisualiser les liens

Pour éviter de changer de contexte lorsque des utilisateurs partagent un lien dans Google Chat, votre application Chat peut prévisualiser le lien en joignant une fiche à leur message. Elle fournit des informations supplémentaires et permet aux utilisateurs d'effectuer des actions directement depuis Google Chat.

Prenons l'exemple d'un espace Google Chat qui inclut tous les agents du service client d'une entreprise et une application Chat nommée Case-y. Les agents partagent fréquemment des liens vers les demandes du service client dans l'espace Chat. Chaque fois qu'ils font leurs collègues, ils doivent ouvrir le lien vers la demande pour afficher des informations telles que la personne responsable, le statut et l'objet. De même, si une personne souhaite devenir propriétaire d'un dossier ou modifier son état, elle doit ouvrir le lien.

La fonctionnalité de prévisualisation des liens permet à l'application Chat de l'espace, Case-y, de joindre une fiche indiquant la personne responsable, le statut et l'objet chaque fois qu'un utilisateur partage un lien vers une demande. Les boutons figurant sur la fiche permettent aux agents de s'approprier le ticket et de modifier son état directement depuis le chat.

Fonctionnement de la prévisualisation des liens

Lorsqu'un utilisateur ajoute un lien à son message, un chip s'affiche pour lui indiquer qu'une application de chat peut prévisualiser le lien.

Chip indiquant qu'une application de chat peut prévisualiser un lien

Une fois le message envoyé, le lien est envoyé à l'application Chat, qui génère la fiche et la joint au message de l'utilisateur.

Application de chat prévisualisant un lien en joignant une fiche au message

À côté du lien, la fiche fournit des informations supplémentaires, y compris des éléments interactifs comme les boutons. Votre application Chat peut mettre à jour la fiche jointe en réponse aux interactions des utilisateurs, comme les clics sur un bouton.

Si un utilisateur ne souhaite pas que l'application Chat affiche un aperçu du lien en y joignant une fiche, il peut l'empêcher en cliquant sur dans le chip d'aperçu. Les utilisateurs peuvent supprimer la fiche jointe à tout moment en cliquant sur Supprimer l'aperçu.

Configurer des aperçus de liens

Enregistrez des liens spécifiques (tels que example.com, support.example.com et support.example.com/cases/) en tant que formats d'URL sur la page de configuration de votre application Chat dans la console Google Cloud afin que celle-ci puisse les prévisualiser.

Menu de configuration des aperçus de liens

Ouvrez Google Cloud Console.
À côté de "Google Cloud", cliquez sur la flèche vers le bas , puis ouvrez le projet de votre application de chat.
Dans le champ de recherche, saisissez Google Chat API, puis cliquez sur API Google Chat.
Cliquez sur Gérer > Configuration.
Sous "Aperçus des liens", ajoutez ou modifiez un format d'URL.
1. Pour configurer des aperçus de lien pour un nouveau format d'URL, cliquez sur Ajouter un format d'URL.
2. Pour modifier la configuration d'un format d'URL existant, cliquez sur la flèche vers le bas .
Dans le champ Format d'URL, saisissez le domaine du format d'URL. L'application Chat affiche un aperçu des liens vers ce domaine.

Pour que les liens d'aperçu de l'application Chat pour un sous-domaine spécifique, comme subdomain.example.com, incluent le sous-domaine.

Pour que les liens d'aperçu de l'application Chat s'appliquent à l'ensemble du domaine, spécifiez un caractère générique comme astérisque (*) en tant que sous-domaine. Par exemple, *.example.com correspond à subdomain.example.com et any.number.of.subdomains.example.com.
Dans le champ Chemin d'accès du chemin d'accès, saisissez un chemin d'accès à ajouter au domaine du format d'hôte.

Pour faire correspondre toutes les URL du domaine du format d'hôte, laissez le préfixe du chemin vide.

Par exemple, si le format d'hôte est support.example.com, saisissez cases/ pour correspondre aux URL des cas hébergés sur support.example.com/cases/.
Cliquez sur OK.
Cliquez sur Enregistrer.

Désormais, lorsqu'un utilisateur inclut un lien qui correspond à un format d'URL d'aperçu de lien vers un message dans un espace Chat incluant votre application Chat, celle-ci affiche un aperçu du lien.

Prévisualiser un lien

Une fois que vous avez configuré l'aperçu d'un lien donné, votre application Chat peut le reconnaître et le prévisualiser en lui associant des informations supplémentaires.

Dans les espaces Chat incluant votre application Chat, lorsqu'un message contient un lien correspondant à un format d'URL d'aperçu, le lien est envoyé à votre application Chat en tant qu'attribut matchedUrl dans l'objet message:

JSON

message {

  . . . // other message attributes redacted

  "matchedUrl": {
     "url": "https://support.example.com/cases/case123"
   },

  . . . // other message attributes redacted

}

En recherchant la présence de l'attribut matchedUrl dans l'objet message, votre application Chat peut ajouter des informations au message contenant le lien d'aperçu. Votre application de chat peut répondre par SMS simple ou joindre une fiche.

Répondre par SMS

Pour les réponses simples, votre application Chat peut prévisualiser un lien en répondant à l'aide d'un SMS simple. Dans cet exemple, un message répète l'URL du lien qui correspond à un format d'URL d'aperçu du lien.

Node.js

Node/preview-link/simple-text-message.js

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (req.body.message.matchedUrl) {
    res.json({
      'text': 'req.body.message.matchedUrl.url: ' +
        req.body.message.matchedUrl.url,
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/simple-text-message.gs

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 *
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (event.message.matchedUrl) {
    return {
      'text': 'event.message.matchedUrl.url: ' + event.message.matchedUrl.url,
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

Joindre une carte

Pour joindre une fiche à un lien d'aperçu, renvoyez une ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Cet exemple montre une carte simple.

Application de chat prévisualisant un lien en joignant une fiche au message

Node.js

node/preview-link/attach-card.js

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    res.json({
      'actionResponse': {'type': 'UPDATE_USER_MESSAGE_CARDS'},
      'cardsV2': [
        {
          'cardId': 'attachCard',
          'card': {
            'header': {
              'title': 'Example Customer Service Case',
              'subtitle': 'Case basics',
            },
            'sections': [
              {
                'widgets': [
                  {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                  {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
                  {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                  {
                    'keyValue': {
                      'topLabel': 'Subject', 'content': 'It won"t turn on...',
                    }
                  },
                ],
              },
              {
                'widgets': [
                  {
                    'buttons': [
                      {
                        'textButton': {
                          'text': 'OPEN CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'RESOLVE CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123?resolved=y',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'ASSIGN TO ME',
                          'onClick': {
                            'action': {
                              'actionMethodName': 'assign',
                            },
                          },
                        },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
      ],
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/attach-card.gs

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'attachCard',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                },
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}},
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

Mettre à jour une carte

Pour mettre à jour la fiche associée à un lien d'aperçu, renvoyez un ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Les fiches associées aux liens d'aperçu ne sont mises à jour qu'en réponse à des requêtes synchrones provenant d'événements Chat. Les requêtes asynchrones pour mettre à jour des fiches associées à un lien d'aperçu via l'API REST Chat ne sont pas acceptées.

L'aperçu du lien ne permet pas de renvoyer un élément ActionResponse de type UPDATE_MESSAGE. UPDATE_MESSAGE ne met à jour que le message dans son intégralité, mais ne fonctionne que si l'application Chat a créé le message d'origine. L'aperçu du lien joint une fiche à un message créé par l'utilisateur. L'application Chat n'est donc pas autorisée à la mettre à jour.

Pour vous assurer qu'une fonction met à jour les fiches créées par l'utilisateur ou par l'application dans le flux Chat, définissez dynamiquement ActionResponse selon que l'application Chat ou un utilisateur a créé le message.

Si un utilisateur a créé le message, définissez ActionResponse sur UPDATE_USER_MESSAGE_CARDS.
Si une application de chat a créé le message, définissez ActionResponse sur UPDATE_MESSAGE.

Pour ce faire, vous pouvez procéder de deux manières: spécifier et rechercher un actionMethodName personnalisé dans la propriété onclick de la fiche jointe (qui identifie le message comme créé par l'utilisateur) ou vérifier si le message a été créé par un utilisateur.

Option 1: Recherchez `actionMethodName`

Pour utiliser actionMethodName afin de gérer correctement les événements de clic sur les fiches prévisualisées, définissez une propriété actionMethodName personnalisée dans la propriété onclick de la fiche jointe:

JSON

. . . // Preview card details
{
  "textButton": {
    "text": "ASSIGN TO ME",
    "onClick": {

      // actionMethodName identifies the button to help determine the
      // appropriate ActionResponse.
      "action": {
        "actionMethodName": "assign",
      }
    }
  }
}
. . . // Preview card details

Lorsque "actionMethodName": "assign" identifie le bouton dans un aperçu du lien, il est possible de renvoyer dynamiquement la ActionResponse correcte en recherchant un actionMethodName correspondant:

Node.js

node/preview-link/update-card.js

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks for the presence of "actionMethodName": "assign" and sets
    // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
    // "UPDATE_MESSAGE" if absent.
    const actionResponseType = req.body.action.actionMethodName === 'assign' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      res.json({
        'actionResponse': {

          // Dynamically returns the correct actionResponse type.
          'type': actionResponseType,
        },

        // Preview card details
        'cardsV2': [{}],
      });
    }
  }
};

Apps Script

apps-script/preview-link/mise à jour-card.gs

Afficher sur GitHub

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks for the presence of "actionMethodName": "assign" and sets
  // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
  // "UPDATE_MESSAGE" if absent.
  const actionResponseType = event.action.actionMethodName === 'assign' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

Option 2: Vérifiez le type d'expéditeur

Vérifiez si message.sender.type est HUMAN ou BOT. Si la valeur est HUMAN, définissez ActionResponse sur UPDATE_USER_MESSAGE_CARDS. Sinon, définissez ActionResponse sur UPDATE_MESSAGE. Voici comment procéder :

Node.js

node/preview-link/sender-type.js

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    res.json({
      'actionResponse': {

        // Dynamically returns the correct actionResponse type.
        'type': actionResponseType,
      },

      // Preview card details
      'cardsV2': [{}],
    });
  }
};

Apps Script

apps-script/preview-link/type-expéditeur.gs

Afficher sur GitHub

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  return assignCase(actionResponseType);
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

La mise à jour d'une fiche est généralement motivée par un clic sur un bouton. Rappelez-vous que le bouton M'attribuer correspond à la section précédente, Joindre une carte. Dans l'exemple complet ci-dessous, la carte est actualisée pour indiquer qu'elle est attribuée à "Vous" lorsqu'un utilisateur clique sur Attribuer à moi. L'exemple définit dynamiquement ActionResponse en vérifiant le type d'expéditeur.

Exemple complet: Application Case-y pour Chat

Voici le code complet de Case-y, une application de chat qui affiche un aperçu des demandes partagées dans un espace Chat avec lequel les agents du service client collaborent.

Node.js

node/preview-link/preview-link.js

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    res.json(createMessage());
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      res.json(createMessage(actionResponseType, 'You'));
    }
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

/**
 * Message to create a card with the correct response type and assignee.
 *
 * @param {string} actionResponseType
 * @param {string} assignee
 * @return {Object} a card with URL preview
 */
function createMessage(
  actionResponseType = 'UPDATE_USER_MESSAGE_CARDS',
  assignee = 'Charlie'
) {
  return {
    'actionResponse': {'type': actionResponseType},
    'cardsV2': [
      {
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [
            {
              'widgets': [
                {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                {'keyValue': {'topLabel': 'Assignee', 'content': assignee}},
                {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                {
                  'keyValue': {
                    'topLabel': 'Subject', 'content': 'It won"t turn on...',
                  },
                },
              ],
            },
            {
              'widgets': [
                {
                  'buttons': [
                    {
                      'textButton': {
                        'text': 'OPEN CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'RESOLVE CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123?resolved=y',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'ASSIGN TO ME',
                        'onClick': {
                          'action': {
                            'actionMethodName': 'assign',
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        }
      },
    ],
  };
}

Apps Script

apps-script/preview-link/preview-link.gs

Afficher sur GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previews.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                }
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}}
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    'cardsV2': [{
      'cardId': 'assignCase',
      'card': {
        'header': {
          'title': 'Example Customer Service Case',
          'subtitle': 'Case basics',
        },
        'sections': [{
          'widgets': [
            {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
            {'keyValue': {'topLabel': 'Assignee', 'content': 'You'}},
            {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
            {
              'keyValue': {
                'topLabel': 'Subject', 'content': 'It won\'t turn on...',
              }
            },
          ],
        },
        {
          'widgets': [{
            'buttons': [
              {
                'textButton': {
                  'text': 'OPEN CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'RESOLVE CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123?resolved=y',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'ASSIGN TO ME',
                  'onClick': {'action': {'actionMethodName': 'assign'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Limites et considérations

Lorsque vous configurez les aperçus de liens pour votre application de chat, tenez compte des limites et des points suivants:

Chaque application de chat accepte jusqu'à cinq formats d'URL.
Les applications de chat affichent un lien par message. Si un même message contient plusieurs liens prévisualisables, seuls les premiers aperçus de liens prévisualisables sont présents.
Les applications de chat ne prévisualisent que les liens commençant par https://. https://support.example.com/cases/ affiche un aperçu, mais pas support.example.com/cases/.
À moins que le message n'inclut d'autres informations envoyées à l'application de chat, comme une commande à barre oblique, seule l'URL du lien est envoyée à l'application Chat par les aperçus des liens.
Les fiches associées aux liens d'aperçu ne sont compatibles qu'avec les ActionResponse de type UPDATE_USER_MESSAGE_CARDS, et uniquement en réponse aux requêtes synchrones des événements Chat. Les aperçus de lien ne sont pas compatibles avec les requêtes UPDATE_MESSAGE ni avec les requêtes asynchrones pour mettre à jour les fiches associées à un lien prévisualisé via l'API REST Chat. Pour en savoir plus, consultez Mettre à jour une carte.

Déboguer les aperçus des liens

Lorsque vous implémentez des aperçus de liens, vous devrez peut-être déboguer votre application de chat en lisant les journaux de l'application. Pour lire les journaux, accédez à l'explorateur de journaux dans la console Google Cloud.

Prévisualiser les liens

Fonctionnement de la prévisualisation des liens

Configurer des aperçus de liens

Prévisualiser un lien

JSON

Répondre par SMS

Node.js

Apps Script

Joindre une carte

Node.js

Apps Script

Mettre à jour une carte

Option 1: Recherchez actionMethodName

JSON

Node.js

Apps Script

Option 2: Vérifiez le type d'expéditeur

Node.js

Apps Script

Exemple complet: Application Case-y pour Chat

Node.js

Apps Script

Limites et considérations

Déboguer les aperçus des liens

Option 1: Recherchez `actionMethodName`