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

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 qui fournit plus d'informations et permet aux utilisateurs d'effectuer une action directement depuis Google Chat.

Par exemple, imaginez un espace Google Chat incluant tous les agents du service client d'une entreprise et une application Chat nommée Case-y. Les agents partagent souvent des liens vers des demandes adressées au service client dans l'espace Chat. À chaque fois qu'ils le font, leurs collègues doivent ouvrir le lien de la demande pour afficher des informations telles que la personne responsable, l'état et l'objet. De même, si une personne souhaite devenir propriétaire d'un dossier ou en modifier l'état, elle doit ouvrir le lien correspondant.

L'aperçu des liens permet à l'application Chat résidente 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 de la fiche permettent aux agents de s'approprier le dossier et de modifier son état directement depuis le flux de chat.

Fonctionnement de l'aperçu des liens

Lorsqu'un utilisateur ajoute un lien à son message, un chip s'affiche pour lui indiquer 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 carte et l'ajoute au message de l'utilisateur.

Application Chat prévisualisant un lien en joignant une carte au message

La fiche contient des informations supplémentaires sur le lien, 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 les clics sur les boutons.

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.

Configurer les aperçus de lien

Enregistrez des liens spécifiques (comme 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 lien

Ouvrez Google Cloud Console.
À côté de "Google Cloud", cliquez sur la flèche vers le bas et ouvrez le projet de votre application Chat.
Dans le champ de recherche, saisissez Google Chat API, puis cliquez sur API Google Chat.
Cliquez sur Gérer > Configuration.
Sous "Aperçus du lien", 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'hôte, saisissez le domaine du format d'URL. L'application Chat prévisualisera les liens vers ce domaine.

Pour que les liens d'aperçu de l'application Chat d'un sous-domaine spécifique (subdomain.example.com, par exemple) s'affichent, 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 (*) comme sous-domaine. Par exemple, *.example.com correspond à subdomain.example.com et any.number.of.subdomains.example.com.
Dans le champ Préfixe du chemin, saisissez un chemin d'accès à ajouter au domaine du modèle d'hôte.

Pour représenter toutes les URL du domaine du format d'hôte, laissez le champ Préfixe de chemin vide.

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

Désormais, chaque fois qu'un utilisateur inclut un lien qui correspond au format d'URL d'aperçu du lien avec un message dans un espace Chat incluant votre application Chat, votre application prévisualise le lien.

Prévisualiser un lien

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

Dans les espaces Chat qui incluent votre application Chat, lorsqu'un message contient un lien correspondant au format d'URL d'aperçu du lien, votre application Chat reçoit un événement d'interaction MESSAGE. La charge utile JSON pour 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 la charge utile de l'événement MESSAGE, votre application Chat peut ajouter des informations au message avec le lien prévisualisé. Votre application Chat peut répondre par message simple ou joindre une carte.

Répondre par SMS

Pour obtenir des réponses simples, votre application Chat peut prévisualiser un lien en répondant par un message simple à 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

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 prévisualisé, renvoyez un ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Dans cet exemple, une carte simple est jointe.

Application Chat prévisualisant un lien en joignant une carte 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 carte associée à un lien prévisualisé, renvoyez un ActionResponse de type UPDATE_USER_MESSAGE_CARDS. Les applications de chat ne peuvent mettre à jour que les fiches qui prévisualisent les liens en réponse à un événement d'interaction avec une application Chat. Les applications 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 met à jour l'intégralité du message et pas uniquement la fiche, il ne fonctionne que si l'application Chat a créé le message d'origine. L'aperçu du lien joint une carte à un message créé par l'utilisateur. L'application Chat n'est donc pas autorisée à la modifier.

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

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

Pour cela, vous pouvez spécifier et vérifier 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 bien é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 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

"actionMethodName": "assign" identifie le bouton dans le cadre d'un aperçu de lien, et il est possible de renvoyer dynamiquement la bonne ActionResponse en recherchant une actionMethodName correspondante:

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/update-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é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

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/sender-type.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 carte est souvent due à un clic sur un bouton. Rappelez-vous le bouton M'assigner de la section précédente, Joindre une carte. Dans l'exemple ci-dessous, la fiche est mise à jour de façon à indiquer qu'elle est attribuée à "Vous" lorsqu'un utilisateur clique sur M'attribuer. L'exemple définit de façon dynamique ActionResponse 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 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 des aperçus de liens pour votre application Chat, tenez compte des limites et considérations suivantes:

Chaque application Chat permet d'afficher des aperçus de liens pour cinq formats d'URL au 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 peut être prévisualisé.
Les applications de chat ne prévisualisent que les liens qui commencent par https://. https://support.example.com/cases/ affiche l'aperçu, mais pas support.example.com/cases/.
À moins que le message n'inclut 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 les aperçus de lien.
Les fiches jointes aux liens prévisualisés ne sont compatibles qu'avec un 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 lien 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.

Déboguer les aperçus de liens

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

Prévisualiser les liens

Fonctionnement de l'aperçu des liens

Configurer les aperçus de lien

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érifier le type d'expéditeur

Node.js

Apps Script ;

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

Node.js

Apps Script ;

Limites et considérations

Déboguer les aperçus de liens

Option 1: Recherchez `actionMethodName`