Vorschaulinks

Um einen Wechsel zwischen den Kontexten zu verhindern, wenn Nutzer einen Link in Google Chat teilen, kann die Chat-App den Link in der Vorschau ansehen. Dazu wird eine Karte an die Nachricht angehängt, die mehr Informationen enthält und die Nutzer direkt in Google Chat Aktionen ausführen können.

Stellen Sie sich zum Beispiel einen Google Chat-Bereich vor, der alle Kundenservicemitarbeiter eines Unternehmens sowie eine Chat-App namens Case-y enthält. Kundenservicemitarbeiter teilen häufig Links zu Kundendienstanfragen im Chatbereich und ihre Kollegen müssen bei jeder Anfrage den Link für den Fall ö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.

Mithilfe 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 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 aufrufen kann

Nach dem Senden der Nachricht wird der Link an die Chat-App gesendet, die die Karte erstellt und an die Nachricht des Nutzers anhä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 wie Klicks auf Schaltflächen aktualisieren.

Wenn jemand nicht möchte, dass in der Chat-App eine Vorschau des Links angezeigt wird, indem an seine Nachricht eine Karte angehängt wird, 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 Linkvorschau

  1. Öffnen Sie die Google Cloud Console.
  2. Klicken Sie neben „Google Cloud“ auf den Abwärtspfeil und öffnen Sie das Projekt der 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. Wenn Sie die Linkvorschau für ein neues URL-Muster konfigurieren möchten, 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 die Domain des URL-Musters in das Feld Host-Muster ein. In der Chat-App werden Links zu dieser Domain als Vorschau angezeigt.

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

    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 den Pfad ein, der an die Domain des Hostmusters angehängt werden soll.

    Wenn alle URLs in der Domain mit Hostmustern abgeglichen werden sollen, lassen Sie das Feld Pfadpräfix leer.

    Wenn das Hostmuster beispielsweise support.example.com lautet, 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 die Linkvorschau-URL einer Nachricht in einem Chatbereich mit Ihrer Chat App übereinstimmt, wird in der App eine Vorschau angezeigt.

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

Wenn eine Nachricht in Chatbereichen, die Ihre Chat-App enthalten, einen Link enthält, der einem URL-Muster für die Linkvorschau entspricht, 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 Nutzlast 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 Textnachricht antworten oder eine Karte anhängen.

Mit einer SMS antworten

Bei einfachen Antworten kann Ihre Chat-App 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/preview-link/simple-text-message.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

Apps Script

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

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

Karte anhängen

Um eine Karte an einen Vorschaulink anzuhängen, gib eine 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/preview-link/attach-card.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

Apps Script

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 du die mit einem Vorschaulink verknüpfte Karte aktualisieren möchtest, gib ein ActionResponse-Objekt vom Typ UPDATE_USER_MESSAGE_CARDS zurück. Chat-Apps können nur Karten aktualisieren, die Links als Antwort auf ein Interaktionsereignis einer Chat-App anzeigen. Chat-Apps können diese Karten nicht durch asynchrones Aufrufen der Chat API aktualisieren.

Die Linkvorschau unterstützt die Rückgabe eines ActionResponse-Objekts vom Typ UPDATE_MESSAGE nicht. Da UPDATE_MESSAGE die gesamte Nachricht und nicht nur die Karte aktualisiert, funktioniert das nur, wenn die ursprüngliche Nachricht von der Chat-App erstellt wurde. In der Linkvorschau wird an eine vom Nutzer erstellte Nachricht eine Karte 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 ActionResponse dynamisch fest, je nachdem, ob die Chat-App oder ein Nutzer die Nachricht erstellt hat.

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

Dafür gibt es zwei Möglichkeiten: Sie können ein benutzerdefiniertes actionMethodName als Teil der onclick-Eigenschaft der angehängten Karte angeben und prüfen, ob es 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) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

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

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

Apps Script

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 überprü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 ActionResponse auf UPDATE_MESSAGE. Das geht so:

Node.js

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

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

    return res.json({
      'actionResponse': {

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

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

Apps Script

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 ein Klick auf eine Schaltfläche. Rufen Sie sich noch einmal die Schaltfläche Mir zuweisen aus dem vorigen Abschnitt Karte hinzufügen ins Gedächtnis. Im folgenden Beispiel wird die Karte so aktualisiert, dass sie „Ihnen“ zugewiesen wird, nachdem der Nutzer auf Mir zuweisen geklickt hat. In diesem Beispiel wird ActionResponse dynamisch festgelegt, indem der Absendertyp geprüft wird.

Vollständiges Beispiel: Case-y, die Chat-App für den Kundenservice

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

Node.js

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

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

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

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

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

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

Apps Script

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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Limits und Überlegungen

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

  • Jede Chat-App unterstützt eine Linkvorschau für bis zu fünf URL-Muster.
  • Chat-Apps zeigen eine Vorschau eines Links pro Nachricht an. Wenn in einer Nachricht mehrere Links als Vorschau verfügbar sind, wird nur der erste Link in der Vorschau angezeigt.
  • Chat-Apps zeigen nur Links an, die mit https:// beginnen. Daher wird in https://support.example.com/cases/ eine 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. mit einem Slash-Befehl, wird nur die Link-URL über die Linkvorschau an die Chat App gesendet.
  • An Vorschaulinks angehängte Karten 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 Fehler in der Chat-App beheben. Lesen Sie dazu die Protokolle der App. Rufen Sie zum Lesen der Logs den Log-Explorer in der Google Cloud Console auf.