Prévisualiser les liens

Pour éviter tout changement de contexte lorsque les utilisateurs partagent un lien dans Google Chat, votre application Chat peut prévisualiser le lien en joignant à leur message une fiche fournissant plus d'informations et permettant aux utilisateurs d'agir directement depuis Google Chat.

Par exemple, imaginez un espace Google Chat qui inclut tous les agents du service client d'une entreprise, ainsi qu'une application Chat nommée Case-y. Les agents partagent souvent des liens vers des demandes d'assistance client dans l'espace Chat. À chaque fois, leurs collègues doivent ouvrir le lien de la demande pour voir des détails comme la personne responsable, l'état et l'objet. De même, si une personne souhaite s'approprier une demande ou modifier son état, elle doit ouvrir le lien correspondant.

L'aperçu du lien permet à Case-y, l'application Chat résidente de l'espace, de joindre une fiche indiquant la personne responsable, l'état et l'objet chaque fois que quelqu'un partage un lien vers une demande. Les boutons de la fiche permettent aux agents de s'approprier la demande et de modifier l'état directement depuis le flux du chat.

Lorsqu'un utilisateur ajoute un lien à son message, un chip s'affiche pour l'informer qu'une application Chat peut prévisualiser le lien.

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

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

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

En plus du lien, la fiche fournit des informations supplémentaires sur celui-ci, y compris des éléments interactifs comme des boutons. Votre application Chat peut mettre à jour la fiche jointe en réponse aux interactions des utilisateurs, comme un clic sur un bouton.

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

Prérequis

Node.js

Une application Google Chat avec des fonctionnalités interactives. Pour créer un une application Chat interactive utilisant un service HTTP, suivez ce guide de démarrage rapide.

Apps Script

Une application Google Chat avec des fonctionnalités interactives. Pour créer un application Chat interactive dans Apps Script, suivez ce guide de démarrage rapide.

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 votre application Chat puisse les prévisualiser.

Menu de configuration des aperçus du lien

  1. Ouvrez Google Cloud Console.
  2. À côté de "Google Cloud", Cliquez sur la flèche vers le bas et ouvrez le projet de votre application Chat.
  3. Dans le champ de recherche, saisissez Google Chat API, puis cliquez sur API Google Chat.
  4. Cliquez sur Gérer > Configuration.
  5. Sous "Aperçus des liens", ajoutez ou modifiez un format d'URL.
    1. Pour configurer les aperçus de liens 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 .

  6. Dans le champ Modèle d'hôte, saisissez le domaine du format d'URL. L'application Chat prévisualisera les liens vers ce domaine.

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

    Pour que les liens d'aperçu de l'application Chat s'affichent pour l'ensemble du domaine, spécifiez un caractère générique avec un astérisque (*) en tant que sous-domaine. Par exemple, *.example.com correspond à subdomain.example.com et any.number.of.subdomains.example.com.

  7. Dans le champ Préfixe de chemin, 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 champ Préfixe du chemin vide.

    Par exemple, si le format d'hôte est support.example.com, saisissez cases/ pour rechercher les URL correspondant aux demandes hébergées sur support.example.com/cases/.

  8. Cliquez sur OK.

  9. Cliquez sur Enregistrer.

Désormais, chaque fois qu'un utilisateur inclut un lien correspondant au format d'URL d'aperçu d'un lien vers un message d'un espace Chat incluant votre application Chat, votre application affiche un aperçu du lien.

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

Dans les espaces Chat incluant vos Application Chat, lorsque le message d'une personne contient un lien qui correspond à un format d'URL d'aperçu de lien, votre application Chat reçoit une Événement d'interaction MESSAGE. Le fichier JSON la charge utile de l'événement d'interaction contient le champ matchedUrl:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

En vérifiant la présence du champ matchedUrl dans l'événement MESSAGE votre application Chat peut ajouter des informations au contenant le lien d'aperçu. Votre application Chat peut Répondez par un simple SMS ou joignez une carte.

Répondre par SMS

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

Node.js

node/preview-link/simple-text-message.js
/**
 * 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) {
    return 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) {
    return 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.
  return res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/simple-text-message.gs
/**
 * 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 prévisualisé : renvoie une ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Dans cet exemple, une carte simple est jointe.

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

Node.js

node/preview-link/attach-card.js
/**
 * 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) {
    return 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) {
    return 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.
  return res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches Apps Script.

apps-script/preview-link/attach-card.gs
/**
 * 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 jointe à un lien prévisualisé, renvoyez une ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Les applications de chat ne peuvent être mises à jour des fiches qui prévisualisent les liens en réponse à une Événement d'interaction avec l'application Chat : Les applications de chat ne peuvent pas mettre à jour ces fiches en appelant l'API Chat de manière asynchrone.

L'aperçu du lien ne permet pas de renvoyer un ActionResponse de type UPDATE_MESSAGE. Étant donné que UPDATE_MESSAGE modifie le message entier et pas seulement la fiche, cela 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, de sorte que l'application Chat n'est pas autorisée à le mettre à jour.

Pour vous assurer qu'une fonction met à jour les fiches créées par l'utilisateur et par l'application dans le flux Chat, définissez la ActionResponse de manière dynamique selon que le message a été créé par l'application Chat ou par un utilisateur.

  • Si un utilisateur a créé le message, définissez ActionResponse sur UPDATE_USER_MESSAGE_CARDS.
  • Si le message a été créé par une application Chat, définissez ActionResponse sur UPDATE_MESSAGE.

Il existe deux façons de le faire: spécifier et rechercher un actionMethodName personnalisé dans la propriété onclick de la carte 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 d'interaction CARD_CLICKED sur les fiches prévisualisées, définissez un actionMethodName personnalisé dans la propriété onclick de la fiche associée:

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

"actionMethodName": "assign" identifiant le bouton dans le cadre d'un aperçu de lien, il est possible de renvoyer dynamiquement le bon ActionResponse en recherchant un actionMethodName correspondant:

Node.js

node/preview-link/update-card.js
/**
 * 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) {
    return 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') {
      return res.json({
        'actionResponse': {

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

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

Apps Script

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches Apps Script.

apps-script/preview-link/update-card.gs
/**
 * 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érifier le type d'expéditeur

Vérifiez si message.sender.type est défini sur 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
/**
 * 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) {
    return 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';

    return res.json({
      'actionResponse': {

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

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

Apps Script

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches Apps Script.

apps-script/preview-link/sender-type.gs
/**
 * 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 effectuée en réponse à un clic sur un bouton. Rappelez-vous le bouton M'attribuer de la section précédente Joindre une carte. L'exemple complet suivant met à jour la carte afin qu'elle indique qu'elle est attribuée à "Vous" après qu'un utilisateur a cliqué sur M'attribuer. L'exemple définit ActionResponse de manière dynamique en vérifiant le type d'expéditeur.

Exemple complet: Case-y pour l'application Chat du service client

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

Node.js

node/preview-link/preview-link.js
/**
 * 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) {
    return 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';

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

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

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return 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

Cet exemple envoie un message de carte en renvoyant fichier JSON de la carte. Vous pouvez également utiliser Service de fiches Apps Script.

apps-script/preview-link/preview-link.gs
/**
 * 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 des aperçus de liens pour votre application Chat, tenez compte des limites et considérations suivantes:

  • Chaque application Chat est compatible avec les aperçus de liens pour cinq formats d'URL maximum.
  • Les applications de chat prévisualisent un lien par message. Si plusieurs liens prévisualisables sont présents dans un même message, seul le premier lien est prévisualisé.
  • Les applications de chat ne prévisualisent que les liens commençant par https://. https://support.example.com/cases/ est donc prévisualisé, mais pas support.example.com/cases/.
  • À moins que le message n'inclue d'autres informations envoyées à l'application Chat, comme une commande à barre oblique, seule l'URL du lien est envoyée à l'application Chat via des aperçus de lien.
  • Les fiches jointes aux liens d'aperçu ne sont compatibles qu'avec une ActionResponse de type UPDATE_USER_MESSAGE_CARDS, et uniquement en réponse à un événement d'interaction avec l'application Chat. Les aperçus de liens ne sont pas compatibles avec UPDATE_MESSAGE ni avec les requêtes asynchrones de mise à jour des fiches associées à un lien prévisualisé via l'API Chat. Pour en savoir plus, consultez Mettre à jour une carte.
  • Les applications de chat doivent prévisualiser les liens pour tous les membres de l'espace. le message doit omettre privateMessageViewer .

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