Vorschaulinks

Damit der Kontextwechsel verhindert wird, wenn Nutzer einen Link in Google Chat teilen, kann in der Chat-App eine Vorschau des Links angezeigt werden. Dazu wird eine Karte an die Nachricht angehängt. Diese enthält weitere Informationen und ermöglicht den Nutzern, direkt in Google Chat Aktionen auszuführen.

Stellen Sie sich beispielsweise einen Gruppenbereich in Google Chat vor, der alle Kundenservicemitarbeiter eines Unternehmens sowie eine Chat-App namens Case-y umfasst. Kundenservicemitarbeiter teilen häufig Links zu Kundenservicefällen im Chatbereich und ihre Kollegen müssen den Falllink jedes Mal öffnen, um Details wie zuständige Person, Status und Betreff zu sehen. Wenn jemand die Bearbeitung einer Anfrage übernehmen oder den Status ändern möchte, muss er den Link öffnen.

Mit der Linkvorschau kann die Chat-App Case-y des Gruppenbereichs eine Karte mit der zuständigen Person, dem Status und dem Betreff anhängen, wenn jemand einen Falllink teilt. Über die Schaltflächen auf der Karte können Kundenservicemitarbeiter die Anfrage übernehmen und den Status direkt über den Chatstream ändern.

Wenn jemand seiner Nachricht einen Link hinzufügt, wird ein Chip mit dem Hinweis angezeigt, dass in einer Chat-App möglicherweise eine Vorschau des Links angezeigt wird.

Chip, der darauf hinweist, dass eine Chat-App möglicherweise eine Vorschau eines Links anzeigt

Nach dem Senden der Nachricht wird der Link an die Chat-App gesendet. Dort wird die Karte erstellt und an die Nachricht des Nutzers angehängt.

Chat-App zeigt eine Vorschau eines Links an, indem eine Karte an die Nachricht angehängt wird

Neben dem Link enthält die Karte zusätzliche Informationen zum Link, einschließlich interaktiver Elemente wie Schaltflächen. Ihre Chat-App kann die angehängte Karte als Reaktion auf Nutzerinteraktionen aktualisieren, z. B. Klicks auf Schaltflächen.

Wenn ein Nutzer nicht möchte, dass in der Chat App eine Vorschau für seinen Link angezeigt wird, indem er eine Karte an seine Nachricht anhängt, kann er dies verhindern, indem er auf dem Vorschau-Chip auf klickt. 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/ als URL-Muster auf der Konfigurationsseite Ihrer Chat-App in der Google Cloud Console, damit Ihre Chat-App sie als Vorschau ansehen kann.

Konfigurationsmenü für Linkvorschauen

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

  6. Geben Sie in das Feld Host-Muster die Domain des URL-Musters ein. In der Chat App werden Links zu dieser Domain in der Vorschau angezeigt.

    Wenn Sie die Vorschaulinks für die Chat-App für eine bestimmte Subdomain wie subdomain.example.com sehen möchten, fügen Sie die Subdomain hinzu.

    Wenn die Vorschaulinks für die Chat-App für die gesamte Domain angezeigt werden sollen, geben Sie ein Platzhalterzeichen mit einem Sternchen (*) als Subdomain an. Beispiel: *.example.com stimmt mit subdomain.example.com und any.number.of.subdomains.example.com überein.

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

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

    Lautet das Hostmuster beispielsweise support.example.com, geben Sie cases/ ein, um URLs für Fälle abzugleichen, die unter support.example.com/cases/ gehostet werden.

  8. Klicken Sie auf Fertig.

  9. Klicken Sie auf Speichern.

Wenn jetzt jemand einen Link einfügt, der mit einem Muster für eine Linkvorschau-URL einer Nachricht in einem Chatbereich übereinstimmt, zu dem auch Ihre Chat App gehört, wird in der App eine Vorschau des Links angezeigt.

Nachdem Sie die Linkvorschau für einen bestimmten Link konfiguriert haben, kann Ihre Chat-Anwendung den Link erkennen und als Vorschau anzeigen, indem er weitere Informationen an ihn angehängt hat.

Wenn die Nachricht einer Person in Chatbereichen, die Ihre Chat-App enthalten, einen Link enthält, der mit einem Linkvorschau-URL-Muster übereinstimmt, empfängt Ihre Chat-App ein MESSAGE-Interaktionsereignis. Die JSON-Nutzlast für das Interaktionsereignis enthält das Feld matchedUrl:

JSON

message {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Wenn das Feld matchedUrl in der Ereignisnutzlast des Ereignisses MESSAGE vorhanden ist, kann die Chat-App der Nachricht über den 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 kann die Chat-Anwendung eine Vorschau eines Links anzeigen, indem sie mit einer einfachen Textnachricht auf einen Link antwortet. In diesem Beispiel wird eine Nachricht angehängt, in der die Link-URL wiederholt wird, die einem URL-Muster für die Linkvorschau entspricht.

Node.js

Node/Vorschaulink/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) {
    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
/**
 * 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 in der Vorschau angezeigten Link anhängen möchten, geben Sie einen ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS zurück. In diesem Beispiel wird eine einfache Karte angehängt.

Chat-App zeigt eine Vorschau eines Links an, indem eine Karte an die Nachricht angehängt wird

Node.js

Node/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/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.'};
}

Karte aktualisieren

Wenn Sie die mit einem Vorschaulink verknüpfte Karte aktualisieren möchten, geben Sie einen ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS zurück. Chat-Apps können nur Karten mit Vorschaulinks als Antwort auf ein Interaktionsereignis einer Chat-App aktualisieren. Chat-Apps können diese Karten nicht durch asynchrones Aufrufen der Chat API aktualisieren.

Bei der Linkvorschau wird die Rückgabe eines ActionResponse des Typs UPDATE_MESSAGE nicht unterstützt. Da UPDATE_MESSAGE die gesamte Nachricht und nicht nur die Karte aktualisiert, funktioniert es nur, wenn die ursprüngliche Nachricht von der Chat App erstellt wurde. Bei der Linkvorschau wird eine Karte an eine vom Nutzer erstellte Nachricht angehängt. Die Chat-App ist daher nicht berechtigt, sie zu aktualisieren.

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

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

Dafür gibt es zwei Möglichkeiten: Sie können ein benutzerdefiniertes actionMethodName als Teil der onclick-Eigenschaft der angehängten Karte angeben und danach prüfen, ob die Nachricht von einem Nutzer erstellt wurde. Damit wird die Nachricht als vom Nutzer erstellt gekennzeichnet.

Option 1: Prüfen Sie, ob actionMethodName vorhanden ist.

Damit actionMethodName für die korrekte Verarbeitung von CARD_CLICKED-Interaktionsereignissen auf Karten in der Vorschau verwendet werden kann, müssen Sie ein benutzerdefiniertes actionMethodName als Teil der onclick-Eigenschaft der angehängten 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

Wenn "actionMethodName": "assign" die Schaltfläche als Teil einer Linkvorschau identifiziert, ist es möglich, das richtige ActionResponse dynamisch zurückzugeben, indem nach einer übereinstimmenden actionMethodName gesucht wird:

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) {
    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
/**
 * 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: Absendertyp prüfen

Prüfen Sie, ob message.sender.type den Wert HUMAN oder BOT hat. Wenn HUMAN, setzen Sie ActionResponse auf UPDATE_USER_MESSAGE_CARDS. Andernfalls setzen Sie ActionResponse auf UPDATE_MESSAGE. Das geht so:

Node.js

Knoten/Vorschaulink/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-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': [{}],
  };
}

Ein typischer Grund für die Aktualisierung einer Karte ist der Klick auf eine Schaltfläche. Rufen Sie sich noch einmal die Schaltfläche Mir zuweisen aus dem vorherigen Abschnitt, Karte anhängen, ins Gedächtnis. Im folgenden vollständigen Beispiel wird die Karte so aktualisiert, dass sie „Ihnen“ zugewiesen wird, nachdem ein Nutzer auf Mir zuweisen geklickt hat. Im Beispiel wird ActionResponse durch Prüfen des Absendertyps dynamisch festgelegt.

Vollständiges Beispiel: Case-y – die Chat-App des Kundenservice

Hier ist der vollständige Code für Case-y, eine Chat-App, die eine Vorschau von Links zu Anfragen anzeigt, die in einem Chatbereich freigegeben wurden, in dem Kundenservicemitarbeiter zusammenarbeiten.

Node.js

Node/Vorschaulink/Vorschaulink.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-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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Einschränkungen und Hinweise

Beachten Sie beim Konfigurieren der Linkvorschau für Ihre Chat-App die folgenden Einschränkungen und Hinweise:

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

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