Menu

Custom Media attached to Conversations

With Flex and call recording enabled you can drill down from Flex Insights Historical Reporting directly to calls and chat transcripts. You can listen to a call recording related to call conversation. You can read a chat transcript related to chat conversation done via Twilio Programmable Chat.

You can attach a list of custom media can point to additional media or other resources related to a conversation or its segments. Custom media can be used to:

  • Attach call recordings stored in an external system
  • Attach related CRM records
  • Attach related ticketing system items

There can be multiple media attached to each conversation and users can switch between in the user interface.

Adding media links overrides the references to default call recording and default chat transcript. To reference the original call recording or the original chat transcript together with custom media you need to list the original recording and chat transcript in the media links yourself.

Add Media Links

Each segment can have multiple media links related to it.

You can provide links on task level and/or on reservation level:

  • Task-level media links. The media links are attached to all segments related to the task.
  • Reservation-level media links. The media are attached to all segments related to the reservation. Reservation-level media links override task-level media links. If a reservation has related media links no media links from the task level are attached.

Example TaskRouter attributes structure for task-level media links:

"task_attributes": {
  "conversations": {
    "media": [
      // media links list goes here
    ]
  }
}

Example TaskRouter attributes structure for reservation-level media links:

"task_attributes": {
  "reservation_attributes": {
    "<reservation_sid_1>": {
      "media": [
         // media links list goes here
      ]
    }
  }
}

Raw Media Link

Raw media link is passed as-is to Historical Reporting.

This means that on drill down either the link is opened in a new browser tab or you can respond to clicks on that link and create custom drill down behavior in Flex.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "Raw",
        "url": "https://company.com/record-id",
        "title": "CRM Conversation Record"
      }
    ]
  }
}

Embedded Media Link

Embedded media link enables you to show custom webpage in an iframe on Conversation Screen. This type of media links is useful for referencing tickets, CRM records and similar content related to conversations. The application that you embedd has to support unique and URLs for records that you are interested it so you can point to th content directly relateed to a conversation.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "Embedded",
        "url": "https://company.com/tickets/ticket-id",
        "title": "Support Ticket"
      }
    ]
  }
}

Some web applications do not enable to embed their content or require configuration on their side to enable embedding. In case a web application does not enable embedding use the referenced media link type.

Referenced Media Link

Referenced media link is useful for pointing to external web pages related to a conversation. Referenced media links are shown as links in Conversation Screen.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "Referenced",
        "url": "https://externalsystem.com/record-id",
        "title": "External Ticket"
      }
    ]
  }
}

Voice Recording Media Link

VoiceRecording references a voice call recording that users can playback and listen to in case they drill down to a conversation. VoiceRecording media are also processed by Speech Analytics Essentials to detect silences, agent talk and customer talk.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "VoiceRecording",
        "url": "https://exampleurl.com",
        "start_time": 1574350320000,
        "channels": [
          "customer",
          "others"
        ],
        "Title": "Dual channel recording"
      }
    ]
  }
}

When call recording is enabled in Flex you do not typically have to provide link to a voice recording.

The start_time attribute needs to be in miliseconds (i.e. 1574350320000).

Chat Transcript Media Link

Chat Transcript media link references a chat transcript made by Twilio Programmable Chat.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "ChatTranscript",
        "sid": "CHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    ]
  }
}

Multiple Media Links

Media links list can have multiple items in them. When users drill down to a conversation with multiple media attached to them they can switch between them.

In the following cases there is a specific behavior for media links:

  • When Raw media link is on the first position in the list then when customers drill down to a conversation Conversation Screen does not open. The Raw media link is open in a new browser window/tab. The other media links are not accessible from Flex user interface.
  • Only the first VoiceRecording media link in the list will be procced by Speech Analytics Essentials for silences, agent and customer talk time.

The following example shows multiple media links in a conversation. The Conversation Screen will offer users to switch between the chat transcript and the embedded content. Also the voice recording will be analyzed by Speech Analytics essentials and available for playback.

"task_attributes": {
  "conversations": {
    "media": [
      {
        "type": "Embedded",
        "url": "https://company.com/ticket-id",
        "title": "Support Ticket"
      },
      {
        "type": "ChatTranscript",
        "sid": "CHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      },
      {
        "type": "VoiceRecording",
        "url": "https://exampleurl.com"
      }
    ]
  }
}

Respond to Drilldowns in Historical Reporting

When users click on a conversation in Flex Insights Flex shows either a call, chat transcript or a list of custom media provided via TaskRouter attributes. Users can change this behavior. The primary use of custom response to drill downs is to respond to Raw media links.

import { Actions } from "@twilio/flex-ui"

Actions.replaceAction("HistoricalReporting:view", async (url, original) => {

    // implement your own handling of URL or call original(url) to use the original handler
})

Developers can decide whether they want to handle each drill down themselves or pass it to Flex to handle the drill down. This can be based on the URL that a user clicked or based on any other conditions.

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.