Tutorial: Providing a downloadable conversation transcript

You can customize the web chat to offer your customers the option of downloading a transcript of the conversation history.

For a complete, working version of the example that is described in this tutorial, see Download history for AI assistant web chat.

To support downloading a conversation transcript, this example adds a custom menu option to the overflow menu in the header of the chat window:

Screen capture showing "Download transcript" menu option
Download transcript

Clicking this menu option initiates downloading of a file that contains the complete conversation history in comma-separated values (CSV) format.

  1. Create a handler for the send and receive events. In this handler, save each incoming or outgoing message in a list (messages) to maintain a history of the conversation.

    const messages = [];
    
    function saveMessage(event) {
      messages.push(event.data);
    }
    
  2. Create a handler for the history:begin event, which is fired when the web chat is reloaded from the session history. In this handler, save any reloaded session history to the list.

    function saveHistory(event) {
      messages.push(...event.messages);
    }
    
  3. In your onLoad event handler, use the on() instance method to subscribe to the send, receive, and history:begin events, registering the appropriate handlers as callbacks.

    instance.on({ type: 'send', handler: saveMessage });
    instance.on({ type: 'receive', handler: saveMessage });
    instance.on({ type: 'history:begin', handler: saveHistory });
    
  4. Create a function that converts the messages that are saved in the messages list to the format you want to provide in the downloaded file. This conversion needs to accommodate any response types that the conversation might include (such as text, images, options, or transfers to a human agent).

    In this example, we convert the messages into a CSV file format that can be opened with an application such as Microsoft Excel. The first column in each line is a label that indicates whether the message originated from the customer (You) or from the assistant (Lendyr).

    This function relies on a helper function (createDownloadText) that formats the text for each line. You can see the implementation of this helper function in the full example.

    function createDownload() {
      const downloadLines = [createDownloadText('From', 'Message')];
    
      messages.forEach(message => {
        if (message.input?.text) {
          // This is a message that came from the user.
          downloadLines.push(createDownloadText('You', message.input.text));
        } else if (message.output?.generic?.length) {
          // This is a message that came from the assistant. It can contain an array of individual message items.
          message.output?.generic.forEach(messageItem => {
            // This is only handling a text response but you can handle other types of responses here as well as
            // custom responses.
            if (messageItem?.text) {
              downloadLines.push(createDownloadText('Lendyr', messageItem.text));
            }
          });
        }
      });
    
      return downloadLines.join('\n');
    }
    
  5. Create a function that initiates the download of the conversation history file. This function calls the createDownload() function to generate the content to download. It then simulates clicking a link to start the download, by using a file name generated from the current date.

    function doDownload() {
      const downloadContent = createDownload();
    
      const blob = new Blob([downloadContent], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);
    
      // To automatically trigger a download, we have to create a fake "a" element and then click it.
      const timestamp = new Date().toISOString().replace(/[_:]/g, '-').replace(/.[0-9][0-9][0-9]Z/, '');
      const a = document.createElement('a');
      a.setAttribute('href', url);
      a.setAttribute('download', `Chat History ${timestamp}.csv`);
      a.click();
    }
    
  6. In your onLoad event handler, use the updateCustomMenuOptions() instance method to add a custom menu option that customers can use to download the conversation history. Add this line immediately before the call to the render() instance method.

    instance.updateCustomMenuOptions('bot', [{ text: 'Download history', handler: doDownload }]);
    

For complete working code, see the Download history for AI assistant web chat example.