Diese Seite wurde von der Cloud Translation API übersetzt.

Vorschaulinks

Um zu verhindern, dass beim Teilen eines Links in Google Chat der Kontext gewechselt wird, kann in der Chat App eine Vorschau des Links angezeigt werden. Dazu wird eine Karte an die Nachricht angehängt, die weitere Informationen enthält und Nutzern ermöglicht, direkt in Google Chat Aktionen auszuführen.

Stellen Sie sich beispielsweise einen Google Chat-Bereich vor, der alle Kundenservicemitarbeiter eines Unternehmens und eine Chat-App namens Case-y enthält. Kundenservicemitarbeiter teilen häufig Links zu Kundenserviceanfragen im Chatbereich. Jedes Mal, wenn ihre Kollegen den Fall öffnen, müssen sie den Link öffnen, um Details wie zuständige Person, Status und Betreff zu sehen. Ähnlich verhält es sich, wenn jemand die Bearbeitung eines Falls übernehmen oder den Status ändern möchte. In diesem Fall muss er den Link öffnen.

Mit der Linkvorschau kann die Chat-App des Gruppenbereichs Case-Y immer dann eine Karte anhängen, auf der die zuständige Person, der Status und das Thema des Gruppenbereichs angezeigt wird, wenn jemand einen Link zu einem Fall teilt. Über die Schaltflächen auf der Karte können Kundenservicemitarbeiter die Bearbeitung der Anfrage übernehmen und den Status direkt über den Chatstream ändern.

Funktionsweise der Linkvorschau

Wenn jemand einer Nachricht einen Link hinzufügt, wird ein Chip angezeigt, der darauf hinweist, dass eine Chat-App den Link als Vorschau ansehen kann.

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 dann die Karte generiert und an die Nachricht des Nutzers anhängt.

Die Chat-App zeigt eine Vorschau eines Links durch Anhängen einer Karte an die Nachricht an

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

Wenn ein Nutzer nicht möchte, dass in der Chat App eine Vorschau des Links durch das Hinzufügen einer Karte an die Nachricht angezeigt wird, kann er die Vorschau verhindern, indem er auf dem Vorschau-Chip auf das klickt. Nutzer können die angehängte Karte jederzeit entfernen, indem sie auf Vorschau entfernen klicken.

Vorbereitung

Node.js

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App mit einem HTTP-Dienst verwenden können, führen Sie diese Kurzanleitung aus.

Apps Script

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App in Apps Script verwenden, gehen Sie wie in dieser Kurzanleitung beschrieben vor.

Linkvorschau konfigurieren

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 sich die Chat-App sie in der Vorschau ansehen kann.

Konfigurationsmenü für Linkvorschauen

Öffnen Sie die Google Cloud Console.
Neben „Google Cloud“ Klicken Sie auf den Abwärtspfeil und öffnen Sie das Projekt Ihrer Chat-App.
Geben Sie in das Suchfeld Google Chat API ein und klicken Sie auf Google Chat API.
Klicken Sie auf Verwalten > Konfiguration.
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 Abwärtspfeil .
Geben Sie im Feld Hostmuster die Domain des URL-Musters ein. In der Chat App werden Links zu dieser Domain in der Vorschau angezeigt.

Wenn Sie Vorschaulinks für die Chat-App für eine bestimmte Subdomain wie subdomain.example.com sehen möchten, müssen Sie auch diese angeben.

Wenn Sie Vorschaulinks für die Chat-App für die gesamte Domain sehen möchten, geben Sie für die Subdomain ein Platzhalterzeichen mit einem Sternchen (*) ein. *.example.com stimmt beispielsweise mit subdomain.example.com und any.number.of.subdomains.example.com überein.
Geben Sie im Feld Pfadpräfix einen Pfad ein, der an die Hostmusterdomain angehängt werden soll.

Lassen Sie das Pfadpräfix leer, damit alle URLs in der Hostmusterdomain übereinstimmen.

Wenn das Hostmuster beispielsweise support.example.com ist, geben Sie cases/ ein, um URLs für Fälle abzugleichen, die unter support.example.com/cases/ gehostet werden.
Klicken Sie auf Fertig.
Klicken Sie auf Speichern.

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

Vorschau eines Links anzeigen

Nachdem Sie die Linkvorschau für einen bestimmten Link konfiguriert haben, Die Chat-App kann den Link erkennen und sich eine Vorschau anzeigen lassen, indem das Hinzufügen weiterer Informationen.

In Chatbereichen, die Ihr Chat-App: Wenn die Nachricht eines Nutzers einen Link enthält, mit einem URL-Muster für die Linkvorschau übereinstimmt, wird Ihre Chat-App erhält ein MESSAGE-Interaktionsereignis. Die JSON-Datei 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

}

Durch Prüfen, ob das Feld matchedUrl im Ereignis MESSAGE vorhanden ist kann Ihre Chat-App Informationen zum mit dem Vorschaulink. Ihre Chat-App kann antworten Sie entweder mit einer einfachen SMS oder hängen Sie eine Karte an.

Mit einer SMS antworten

Für einfache Antworten kann in der Chat App eine Vorschau eines Links angezeigt werden Mit einer einfachen Textnachricht antworten zu einem Link. In diesem Beispiel wird eine Nachricht angehängt, in der die Link-URL stimmt mit einem URL-Muster für die Linkvorschau überein.

Node.js

node/preview-link/simple-text-message.js

Auf GitHub ansehen

/**
 * 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

Auf GitHub ansehen

/**
 * 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

So hängen Sie eine Karte an einen Vorschaulink an: eine ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS. In diesem Beispiel wird eine einfache Karte angehängt.

Die Chat-App zeigt eine Vorschau eines Links durch Anhängen einer Karte an die Nachricht an

Node.js

node/preview-link/attach-card.js

Auf GitHub ansehen

/**
 * 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

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

apps-script/preview-link/attach-card.gs

Auf GitHub ansehen

/**
 * 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

Um die Karte zu aktualisieren, die mit einem Vorschaulink verknüpft ist, geben Sie eine ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS. Chat-Apps können nur aktualisiert werden Karten mit Vorschau-Links als Antwort auf eine Chat-App-Interaktionsereignis. Chat-Apps können diese Karten nicht durch Aufrufen der Chat API aktualisieren asynchron programmiert.

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 das nur, wenn die Chat-App die ursprüngliche Nachricht erstellt hat. 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 als auch von Apps erstellte Karten im Chatstream aktualisiert, legen Sie ActionResponse je nachdem, ob die Chat App oder ein Nutzer die Nachricht erstellt hat, dynamisch fest.

Wenn ein Nutzer die Nachricht erstellt hat, 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: Du kannst ein benutzerdefiniertes actionMethodName als Teil der onclick-Eigenschaft der angehängten Karte angeben und prüfen, ob es sich um eine benutzerdefinierte Nachricht handelt (die die Nachricht als vom Nutzer erstellt identifiziert), oder du prüfst, ob die Nachricht von einem Nutzer erstellt wurde.

Option 1: Auf `actionMethodName` prüfen

Wenn Sie actionMethodName für die korrekte Verarbeitung von CARD_CLICKED-Interaktionsereignissen auf Vorschaukarten verwenden möchten, legen Sie in der Eigenschaft onclick der angehängten Karte ein benutzerdefiniertes actionMethodName fest:

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, kann das richtige ActionResponse dynamisch zurückgegeben werden, indem nach einer übereinstimmenden actionMethodName gesucht wird:

Node.js

node/preview-link/update-card.js

Auf GitHub ansehen

/**
 * 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

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

apps-script/preview-link/update-card.gs

Auf GitHub ansehen

/**
 * 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 HUMAN oder BOT ist. Bei HUMAN setzen Sie ActionResponse auf UPDATE_USER_MESSAGE_CARDS. Setzen Sie andernfalls ActionResponse auf UPDATE_MESSAGE. So gehts:

Node.js

node/preview-link/sender-type.js

Auf GitHub ansehen

/**
 * 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

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

apps-script/preview-link/sender-type.gs

Auf GitHub ansehen

/**
 * 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. Erinnern Sie sich noch einmal an die Schaltfläche Zuweisen aus dem vorherigen Abschnitt Karte anhängen. Im folgenden vollständigen Beispiel wird die Karte so aktualisiert, dass sie „Ihnen“ zugewiesen ist. nachdem ein Nutzer auf Mir zuweisen geklickt hat. Im 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 mit Links zu Anfragen, die in einem Chatbereich freigegeben wurden, in dem Kundenservicemitarbeiter zusammenarbeiten.

Node.js

node/preview-link/preview-link.js

Auf GitHub ansehen

/**
 * 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

In diesem Beispiel wird eine Kartennachricht gesendet, JSON-Karte Sie können auch die Apps Script-Kartendienst

apps-script/preview-link/preview-link.gs

Auf GitHub ansehen

/**
 * 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 Beschränkungen und Hinweise:

Jede Chat-App unterstützt eine Linkvorschau für bis zu fünf URL-Muster.
Chat-Apps sehen in der Vorschau einen Link pro Nachricht. Wenn eine einzelne Nachricht mehrere Vorschaulinks enthält, wird nur für den ersten Link eine Vorschau angezeigt.
In Chat-Apps sehen Sie nur Vorschaulinks, die mit https:// beginnen. Daher sehen Sie https://support.example.com/cases/ eine Vorschau an, 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 über eine Linkvorschau an die Chat App gesendet.
Karten, die an Vorschaulinks angehängt sind, unterstützen nur ein ActionResponse vom Typ UPDATE_USER_MESSAGE_CARDS und nur als Reaktion auf ein Chat-App-Interaktionsereignis. In der Linkvorschau werden weder UPDATE_MESSAGE noch asynchrone 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.
Chat-Apps müssen Vorschaulinks für alle im Gruppenbereich anzeigen. In der Nachricht muss privateMessageViewer ausgelassen werden. ein.

Linkvorschauen beheben

Wenn Sie die Linkvorschau implementieren, müssen Sie möglicherweise die Fehler in der Chat-App beheben, indem Sie die Protokolle der App lesen. Um die Logs zu lesen, rufen Sie den Log-Explorer in der Google Cloud Console auf.

Vorschaulinks

Funktionsweise der Linkvorschau

Vorbereitung

Node.js

Apps Script

Linkvorschau konfigurieren

Vorschau eines Links anzeigen

JSON

Mit einer SMS antworten

Node.js

Apps Script

Karte anhängen

Node.js

Apps Script

Karte aktualisieren

Option 1: Auf actionMethodName prüfen

JSON

Node.js

Apps Script

Option 2: Absendertyp prüfen

Node.js

Apps Script

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

Node.js

Apps Script

Einschränkungen und Hinweise

Linkvorschauen beheben

Option 1: Auf `actionMethodName` prüfen