Custom Media attached to Conversations

Each segment can have multiple media links related to it. You can provide links on the task level and/or on the 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:

1
{
2
  "conversations": {
3
    "media": [
4
      // media links list goes here
5
    ]
6
  }
7
}

Example TaskRouter attributes structure for reservation-level media links:

1
{
2
  "reservation_attributes": {
3
    "<reservation_sid_1>": {
4
      "media": [
5
         // media links list goes here
6
      ]
7
    }
8
  }
9
}

Raw media links are passed as-is to Historical Reporting. This means that when you drill down, 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.

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "Raw",
6
        "url": "https://company.com/record-id",
7
        "title": "CRM Conversation Record"
8
      }
9
    ]
10
  }
11
}

Embedded media links can display a custom webpage on the Conversation Screen in an iFrame. This type of media link is useful for referencing tickets, CRM records and similar content related to the conversation. The web application that you embed has to support unique URLs for records that you are interested in so you can point to the content directly related to a conversation.

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "Embedded",
6
        "url": "https://company.com/tickets/ticket-id",
7
        "title": "Support Ticket"
8
      }
9
    ]
10
  }
11
}

Note Some web applications do not enable embedding for 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 instead.

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

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "Referenced",
6
        "url": "https://externalsystem.com/record-id",
7
        "title": "External Ticket"
8
      }
9
    ]
10
  }
11
}

Voice Recording Media Links reference voice call recordings that users can playback and listen to in case they need to drill down to a conversation.

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "VoiceRecording",
6
        "url": "https://exampleurl.com",
7
        "start_time": 1574350320000,
8
        "channels": [
9
          "customer",
10
          "others"
11
        ],
12
        "title": "Dual channel recording"
13
      }
14
    ]
15
  }
16
}

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

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

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "ChatTranscript",
6
        "sid": "CHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
7
      }
8
    ]
9
  }
10
}

Media link lists 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 case 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.

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.

1
{
2
  "conversations": {
3
    "media": [
4
      {
5
        "type": "Embedded",
6
        "url": "https://company.com/ticket-id",
7
        "title": "Support Ticket"
8
      },
9
      {
10
        "type": "ChatTranscript",
11
        "sid": "CHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
12
      },
13
      {
14
        "type": "VoiceRecording",
15
        "url": "https://exampleurl.com"
16
      }
17
    ]
18
  }
19
}

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.

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

3
Actions.replaceAction("HistoricalReportingView", async (url, original) => {
4

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

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.