Vorschaulinks

Wenn Sie verhindern möchten, dass Nutzer beim Teilen eines Links in Google Chat den Kontext wechseln, kann die Chat-App den Link in der Vorschau ansehen. Dazu wird der Nachricht eine Karte angehängt, die mehr Informationen bietet und es Nutzern ermöglicht, direkt in Google Chat aktiv zu werden.

Nehmen wir zum Beispiel einen Google Chat-Bereich mit allen Kundenservicemitarbeitern eines Unternehmens sowie einer Chat-App namens Case-y. Kundenservicemitarbeiter teilen häufig Links zu Kundenservice-Anfragen im Chatbereich und jedes Mal, wenn ihre Kollegen die Anfrage bearbeiten, müssen sie den Link öffnen, um Details wie zuständige Person, Status und Betreff zu sehen. Wenn jemand die Inhaberschaft einer Supportanfrage übernehmen oder den Status ändern möchte, muss er den Link öffnen.

Über die Linkvorschau können in der Chat-App des Projektbereichs, Case-y, die Karte zugewiesen werden. Diese Karte enthält die zuständige Person, den Status und den Betreff, wenn jemand einen Link zu einer Anfrage teilt. Mit Schaltflächen auf der Karte können Kundenservicemitarbeiter die Anfrage übernehmen und den Status direkt im Chatstream ändern.

Wenn jemand seiner Nachricht einen Link hinzufügt, erscheint ein Chip, der darauf hinweist, dass eine Chat-App den Link in der Vorschau ansehen kann.

Chip, der darauf hinweist, dass eine Chat-App einen Link als Vorschau ansehen kann

Nachdem die Nachricht gesendet wurde, wird der Link an die Chat App gesendet. Dadurch wird die Karte generiert und an die Nachricht des Nutzers angehängt.

Chat-App, die einen Link in der Vorschau anzeigt, indem eine Karte an die Nachricht angehängt wird

Neben dem Link werden auf der Karte zusätzliche Informationen zum Link, einschließlich interaktiver Elemente wie Schaltflächen, angezeigt. Die Chat-App kann die angehängte Karte als Reaktion auf Nutzerinteraktionen wie Klicks auf Schaltflächen aktualisieren.

Wenn Sie nicht möchten, dass die Chat-App eine Vorschau ihres Links durch Anhängen einer Karte an die Nachricht anzeigt, kann sie die Vorschau durch Klicken auf auf dem Vorschau-Chip verhindern. Nutzer können die angehängte Karte jederzeit entfernen, indem sie auf Vorschau entfernen klicken.

Registrieren Sie bestimmte Links wie example.com, support.example.com und support.example.com/cases/ auf der Konfigurationsseite der Chat App in der Google Cloud Console als URL-Muster, damit die Chat-App eine Vorschau anzeigen kann.

Konfigurationsmenü für die Linkvorschau

  1. Öffnen Sie die Google Cloud Console.
  2. Klicken Sie neben „Google Cloud“ auf den Drop-down-Pfeil und öffnen Sie das Projekt für die Chat-App.
  3. Geben Sie im Suchfeld Google Chat API ein und klicken Sie auf Google Chat API.
  4. Klicken Sie auf Verwalten > Konfiguration.
  5. Unter „Linkvorschau“ können Sie ein URL-Muster hinzufügen oder bearbeiten.
    1. Um die Linkvorschau für ein neues URL-Muster zu konfigurieren, klicken Sie auf URL-Muster hinzufügen.
    2. Wenn Sie die Konfiguration eines vorhandenen URL-Musters bearbeiten möchten, klicken Sie auf den Abwärtspfeil .

  6. Geben Sie in das Feld Hostmuster die Domain des URL-Musters ein. Die Chat-App zeigt eine Vorschau der Links zu dieser Domain an.

    Fügen Sie die Subdomain hinzu, damit die Chat-App eine Vorschau der Links für eine bestimmte Subdomain wie subdomain.example.com enthält.

    Wenn die Chat-App Vorschaulinks für die gesamte Domain anzeigen soll, geben Sie ein Platzhalterzeichen mit einem Sternchen (*) als Subdomain ein. Beispiel: *.example.com entspricht subdomain.example.com und any.number.of.subdomains.example.com.

  7. Geben Sie im Feld Pfadpräfix einen Pfad ein, der an die Domain des Hostmusters angefügt werden soll.

    Wenn alle URLs in der Domain des Hostmusters übereinstimmen sollen, lassen Sie Pfadpräfix leer.

    Wenn das Hostmuster z. B. support.example.com lautet, geben Sie cases/ ein, um URLs für Fälle abzugleichen, die bei support.example.com/cases/ gehostet werden.

  8. Klicken Sie auf Fertig.

  9. Klicken Sie auf Speichern.

Jedes Mal, wenn jemand einen Link einfügt, der mit einem Linkvorschau-URL-Muster mit einer Nachricht in einem Chatbereich übereinstimmt, der Ihre Chat-App enthält, wird ein Link in Ihrer App angezeigt.

Nachdem Sie die Linkvorschau für einen bestimmten Link konfiguriert haben, kann die Chat-App den Link erkennen und als Vorschau ansehen, indem er weitere Informationen hinzufügt.

Wenn sich in einer Chatnachricht in Ihrer Chat-App ein Link befindet, der mit einem URL-Muster für die Linkvorschau übereinstimmt, wird der Link in Ihrer Chat-App als matchedUrl-Attribut für das message-Objekt gesendet:

JSON

message {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Wenn Sie prüfen, ob das matchedUrl-Attribut im message-Objekt vorhanden ist, kann die Chat-App der Nachricht mit dem Vorschaulink Informationen hinzufügen. Ihre Chat-App kann entweder mit einer einfachen SMS antworten oder eine Karte anhängen.

Mit einer SMS antworten

Für einfache Antworten ist eine einfache Textnachricht verfügbar, mit der Sie in der Google Chat App einen Link als Vorschau ansehen können. In diesem Beispiel wird eine Nachricht angehängt, die die Link-URL wiederholt, die mit dem URL-Muster für die Linkvorschau übereinstimmt.

Node.js

Knoten/Vorschau-Link/einfache-Textnachricht.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) {
    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-Skript/Vorschau-Link/einfache-Textnachricht.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.'};
}

Karte anhängen

Wenn Sie eine Karte an einen Vorschaulink anhängen möchten, müssen Sie einen ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS zurückgeben. In diesem Beispiel wird eine einfache Karte angehängt.

Chat-App, die einen Link in der Vorschau anzeigt, indem eine Karte an die Nachricht angehängt wird

Node.js

Knoten/Vorschau-Link/anhängen-karte.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) {
    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/anfügen-karte.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.'};
}

Karte aktualisieren

Wenn Sie die an einen Vorschaulink angehängte Karte aktualisieren möchten, geben Sie einen ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS zurück. Karten, die an Vorschaulinks angehängt sind, werden nur bei synchronen Anfragen aus Chatereignissen aktualisiert. Asynchrone Anfragen zum Aktualisieren von Karten, die über die Chat REST API an einen Vorschaulink angehängt werden, werden nicht unterstützt.

In der Linkvorschau kann kein ActionResponse vom Typ UPDATE_MESSAGE zurückgegeben werden. Da UPDATE_MESSAGE die gesamte Nachricht statt nur die Karte aktualisiert, funktioniert sie nur, wenn die Chat-App die ursprüngliche Nachricht erstellt hat. Bei der Linkvorschau wird eine Karte an eine von Nutzern erstellte Nachricht angehängt, sodass die Chat App nicht berechtigt ist, sie zu aktualisieren.

Damit durch eine Funktion sowohl von Nutzern als auch von Apps erstellte Karten im Chat-Stream aktualisiert werden, legen Sie ActionResponse dynamisch fest, je nachdem, ob die Chat-App oder ein Nutzer die Nachricht erstellt hat.

  • Wenn die Nachricht von einem Nutzer erstellt wurde, setzen Sie ActionResponse auf UPDATE_USER_MESSAGE_CARDS.
  • Wenn die Nachricht von einer Chat-App erstellt wurde, legen Sie ActionResponse auf UPDATE_MESSAGE fest.

Dafür gibt es zwei Möglichkeiten: Entweder wird in der Eigenschaft onclick der angehängten Karte ein benutzerdefiniertes actionMethodName-Element angegeben und es wird geprüft, ob die Nachricht von einem Nutzer erstellt wurde. Außerdem lässt sich überprüfen, ob die Nachricht von einem Nutzer erstellt wurde.

Option 1: Nach actionMethodName suchen

Damit actionMethodName Ereignisse in Karten, die auf Vorschaukarten angezeigt werden, korrekt verarbeitet wird, müssen Sie in der Eigenschaft onclick ein benutzerdefiniertes actionMethodName-Element für die angehängte Karte festlegen:

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

Da "actionMethodName": "assign" die Schaltfläche als Teil einer Linkvorschau identifiziert, können Sie den korrekten ActionResponse-Wert dynamisch zurückgeben, indem Sie nach einer passenden actionMethodName suchen:

Node.js

Knoten/Vorschaulink/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) {
    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.gsm
/**
 * 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: Typ des Absenders prüfen

Prüfen Sie, ob message.sender.type HUMAN oder BOT ist. Wenn HUMAN, legen Sie ActionResponse auf UPDATE_USER_MESSAGE_CARDS fest, ansonsten ActionResponse auf UPDATE_MESSAGE. Das geht so:

Node.js

Knoten/Vorschau-Link/Absendertyp.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) {
    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-Skript/Vorschau-Link/Absendertyp.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': [{}],
  };
}

Ein typischer Grund für die Aktualisierung einer Karte ist das Klicken auf eine Schaltfläche. Wenn Sie die Schaltfläche Mir zuweisen aus dem vorherigen Abschnitt Karte anhängen wieder aufrufen möchten, Im folgenden vollständigen Beispiel wird die Karte so aktualisiert, dass sie „Sie“ zugewiesen wird, nachdem ein Nutzer auf Mir zugewiesen geklickt hat. Im Beispiel wird als Absendertyp ActionResponse dynamisch festgelegt.

Vollständiges Beispiel: Chat-App für den Kundenservice

Hier ist der gesamte Code für die Chat-App Case-y, mit der Links zu Supportanfragen in einem Chatbereich freigegeben werden, in denen Kundenservicemitarbeiter zusammenarbeiten.

Node.js

Knoten/Vorschau-Link/Vorschau-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) {
    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-Skript/Vorschau-Link/Vorschau-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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Limits und Überlegungen

Beachten Sie beim Konfigurieren der Linkvorschauen für Ihre Chat-App die folgenden Beschränkungen:

  • Jede Chat-App unterstützt Linkvorschauen für bis zu fünf URL-Muster.
  • Für Chat-Apps wird jeweils ein Link pro Nachricht angezeigt. Wenn eine einzelne Nachricht mehrere Links in der Vorschau enthält, wird nur die erste Vorschau angezeigt.
  • Für Chat-Apps werden nur Links in der Vorschau angezeigt, die mit https:// beginnen. Daher gibt https://support.example.com/cases/ eine Vorschau, support.example.com/cases/ jedoch nicht.
  • Sofern die Nachricht keine anderen Informationen enthält, die an die Chat-App gesendet werden, z. B. einen Slash-Befehl, wird nur die Link-URL per Linkvorschau an die Chat-App gesendet.
  • Karten, die an Vorschaulinks angehängt sind, unterstützen nur einen ActionResponse-Typ vom Typ UPDATE_USER_MESSAGE_CARDS und nur als Reaktion auf synchrone Anfragen von Chat-Ereignissen. Bei Linkvorschauen können UPDATE_MESSAGE- und asynchrone Anfragen zum Aktualisieren von Karten, die über die Chat REST API an einen Vorschaulink angehängt werden, nicht unterstützt werden. Weitere Informationen finden Sie unter Karte aktualisieren.

Wenn Sie die Linkvorschau implementieren, müssen Sie möglicherweise die Chat-App debuggen, indem Sie die Protokolle der App lesen. Rufen Sie zum Lesen der Logs den Log-Explorer in der Google Cloud Console auf.