Visualizzare l'anteprima dei link nei messaggi di Google Chat

Per evitare il cambio di contesto quando gli utenti condividono un link in Google Chat, l'app Chat può visualizzare l'anteprima del link allegando una scheda al messaggio che fornisce maggiori informazioni e consente agli utenti di intervenire direttamente da Google Chat.

Ad esempio, immagina uno spazio Google Chat che includa tutti gli agenti del servizio clienti di un'azienda più un'app di chat chiamata Case-y. Gli agenti condividono spesso link alle richieste di assistenza clienti nello spazio Chat e ogni volta che lo fanno, i colleghi devono aprire il link della richiesta per visualizzare dettagli come assegnatario, stato e oggetto. Allo stesso modo, se qualcuno vuole assumersi la proprietà di una richiesta o modificarne lo stato, deve aprire il link.

L'anteprima dei link consente all'app di chat residente nello spazio, Case-y, di allegare una scheda che mostra l'assegnatario, lo stato e l'oggetto ogni volta che qualcuno condivide un link a una richiesta. I pulsanti sulla scheda consentono agli agenti di assumere la proprietà della richiesta e modificare lo stato direttamente dal flusso della chat.

Quando qualcuno aggiunge un link al proprio messaggio, viene visualizzato un chip che informa che un'app di chat potrebbe visualizzare l'anteprima del link.

Chip che indica che un'app di chat potrebbe visualizzare l'anteprima di un link

Dopo l'invio del messaggio, il link viene inviato all'app Chat, che genera e allega la scheda al messaggio dell'utente.

Anteprima di un link nell'app di chat con allegato di una scheda al messaggio

Accanto al link, la scheda fornisce ulteriori informazioni sul link, inclusi elementi interattivi come i pulsanti. La tua app di chat può aggiornare la scheda allegata in risposta alle interazioni dell'utente, ad esempio i clic sui pulsanti.

Se un utente non vuole che l'app Chat mostri l'anteprima del suo link allegando una scheda al messaggio, può impedire l'anteprima facendo clic su nel chip di anteprima. Gli utenti possono rimuovere la scheda allegata in qualsiasi momento facendo clic su Rimuovi anteprima.

Prerequisiti

HTTP

Un componente aggiuntivo di Google Workspace che estende Google Chat. Per crearne uno, completa la guida rapida HTTP.

Apps Script

Un componente aggiuntivo di Google Workspace che estende Google Chat. Per crearne uno, completa la guida rapida di Apps Script.

Registra link specifici, ad esempio example.com, support.example.com e support.example.com/cases/, come pattern URL nella pagina di configurazione dell'app Chat nella console Google Cloud, in modo che l'app Chat possa visualizzarli in anteprima.

Menu di configurazione delle anteprime dei link

  1. Apri la console Google Cloud.
  2. Accanto a "Google Cloud", fai clic sulla Freccia giù e apri il progetto dell'app di chat.
  3. Nel campo di ricerca, digita Google Chat API e fai clic su API Google Chat.
  4. Fai clic su Gestisci > Configurazione.
  5. In Anteprime link, aggiungi o modifica un pattern URL.
    1. Per configurare le anteprime dei link per un nuovo pattern URL, fai clic su Aggiungi pattern URL.
    2. Per modificare la configurazione di un pattern URL esistente, fai clic sulla Freccia giù .

  6. Nel campo Pattern host, inserisci il dominio del pattern URL. L'app Chat visualizzerà l'anteprima dei link a questo dominio.

    Per visualizzare l'anteprima dei link per un sottodominio specifico, ad esempio subdomain.example.com, includi il sottodominio.

    Per visualizzare l'anteprima dei link per l'intero dominio, specifica un carattere jolly con un asterisco (*) come sottodominio. Ad esempio, *.example.com corrisponde a subdomain.example.com e any.number.of.subdomains.example.com.

  7. Nel campo Prefisso del percorso, inserisci un percorso da aggiungere al dominio del pattern host.

    Per trovare tutti gli URL nel dominio del pattern host, lascia vuoto il campo Prefisso del percorso.

    Ad esempio, se il pattern host è support.example.com, per trovare corrispondenze con gli URL per i casi ospitati all'indirizzo support.example.com/cases/, inserisci cases/.

  8. Fai clic su Fine.

  9. Fai clic su Salva.

Ora, ogni volta che qualcuno include un link che corrisponde a un pattern di URL di anteprima del link in un messaggio in uno spazio di Chat che include la tua app Chat, la tua app visualizza l'anteprima del link.

Dopo aver configurato l'anteprima dei link per un determinato link, l'app Chat può riconoscere e visualizzare l'anteprima del link allegando ulteriori informazioni.

Negli spazi di Chat che includono la tua app Chat, quando il messaggio di un utente contiene un link che corrisponde a un pattern URL di anteprima del link, la tua app Chat riceve un oggetto evento con un MessagePayload. Nel payload, l'oggetto message.matchedUrl contiene il link che l'utente ha incluso nel messaggio:

JSON

message: {
  matchedUrl: {
    url: "https://support.example.com/cases/case123"
  },
  ... // other message attributes redacted
}

Controllando la presenza del campo matchedUrl nel payload dell'evento MESSAGE, la tua app di chat può aggiungere informazioni al messaggio con il link visualizzato in anteprima. L'app Chat può rispondere con un messaggio di testo di base o allegare una scheda.

Rispondere con un messaggio

Per le risposte di base, l'app Chat può visualizzare l'anteprima di un link rispondendo con un messaggio di testo a un link. Questo esempio allega un messaggio che ripete l'URL del link che corrisponde a un pattern di URL di anteprima del link.

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // If the Chat app does not detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

  // Reply with a text message for URLs of the subdomain "text"
  if (chatMessage.matchedUrl.url.includes("text.example.com")) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
    }}}}};
  }
}

Apps Script

/**
 * Reply to messages that have links whose URLs match the pattern
 * "text.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // If the Chat app doesn't detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

  // Reply with a text message for URLs of the subdomain "text".
  if (chatMessage.matchedUrl.url.includes("text.example.com")) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
    }}}}};
  }
}

Per allegare una scheda a un link visualizzato in anteprima, restituisci l'azione DataActions con l'oggetto ChatDataActionMarkup di tipo UpdateInlinePreviewAction.

Nell'esempio seguente, un'app di chat aggiunge una scheda di anteprima ai messaggi che contengono il pattern URL support.example.com.

Anteprima di un link nell'app di chat con allegato di una scheda al messaggio

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // Attach a card to the message for URLs of the subdomain "support"
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case basics',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

Apps Script

Questo esempio invia un messaggio con scheda restituendo JSON della scheda. Puoi anche utilizzare il servizio di schede Apps Script. 

/**
 * Attach a card to messages that have links whose URLs match the pattern
 * "support.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // Attach a card to the message for URLs of the subdomain "support".
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case summary',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Clicking this button triggers the execution of the function
          // "assign" from the Apps Script project.
          onClick: { action: { function: 'assign'}}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

L'app Chat può aggiornare una scheda di anteprima del link quando gli utenti interagiscono con essa, ad esempio facendo clic su un pulsante della scheda.

Per aggiornare la scheda, la tua app di chat deve restituire l'azione DataActions con uno dei seguenti oggetti ChatDataActionMarkup:

Per determinare chi ha inviato il messaggio, utilizza il payload dell'evento (buttonClickedPayload) per verificare se il mittente (message.sender.type) è impostato su HUMAN (utente) o BOT (app di chat).

Il seguente esempio mostra come un'app di chat aggiorna un'anteprima del link ogni volta che un utente fa clic sul pulsante Assegna a me aggiornando il campo Assegnatario della scheda e disattivando il pulsante.

Anteprima di un link con una versione aggiornata di una scheda allegata a un messaggio nell'app di chat

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to clicks by assigning user and updating the card that was attached to a
 * message with a previewed link.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Action response depending on the original message.
 */
function handleCardClick(chatMessage) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case basics',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
      ]}]
    }
  }]};

  // Checks whether the message event originated from a human or a Chat app
  // to return the adequate action response.
  if(chatMessage.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Apps Script

Questo esempio invia un messaggio con scheda restituendo JSON della scheda. Puoi anche utilizzare il servizio di schede Apps Script. 

/**
 * Assigns and updates the card that's attached to a message with a
 * previewed link of the pattern "support.example.com".
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 *
 * @return {Object} Action response depending on the message author.
 */
function assign(event) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case summary',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          onClick: { action: { function: 'assign'}}
        }]}}
      ]}]
    }
  }]};

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if(event.chat.buttonClickedPayload.message.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Limiti e considerazioni

Quando configuri le anteprime dei link per l'app Chat, tieni presenti questi limiti e considerazioni:

  • Ogni app di chat supporta le anteprime dei link per un massimo di 5 pattern di URL.
  • Le app di chat mostrano l'anteprima di un link per messaggio. Se in un singolo messaggio sono presenti più link visualizzabili in anteprima, viene visualizzata l'anteprima solo del primo link visualizzabile in anteprima.
  • Le app di chat visualizzano l'anteprima solo dei link che iniziano con https://, quindi https://support.example.com/cases/, ma support.example.com/cases/ no.
  • A meno che il messaggio non includa altre informazioni inviate all'app Chat, come un comando slash, solo l'URL del link viene inviato all'app Chat dalle anteprime dei link.
  • Se un utente pubblica il link, un'app di chat può aggiornare la scheda di anteprima del link solo se gli utenti interagiscono con la scheda, ad esempio con un clic su un pulsante. Non puoi chiamare il metodo update() dell'API Chat sulla risorsa Message per aggiornare in modo asincrono il messaggio di un utente.
  • Le app di chat devono mostrare l'anteprima dei link per tutti gli utenti dello spazio, quindi il messaggio deve omettere il campo privateMessageViewer.

Durante l'implementazione delle anteprime dei link, potresti dover eseguire il debug della tua app di chat leggendo i log dell'app. Per leggere i log, visita Esplora log nella console Google Cloud.