Task Channel Definitions example use cases
Adding a Tab to custom channel
MyCallChannel.addedComponents = [
{
target: "TaskCanvasTabs",
component: <MyTab
key="myTab"
icon={<img src="https://someimage.png" />}
iconActive={<img src="someimage.png" />}
/>
}
];Replacing a component (e.g. TaskInfoPanel or MessagingCanvas)
const MyComponent = <div key="X">My Call Task Info Panel</div>;
MyCallChannel.replacedComponents = [
{ component: MyComponent, target: "TaskInfoPanel" }
];Replacing a component conditionally
MyCallChannel.replacedComponents = [
{ component: MyComponent, target: "MessagingCanvas", options:
{ if: (props) => props.task.status === "wrapping" }
}
];Change strings based on task types (e.g., for end task button in the header):
myOwnChatChannel.templates.TaskCanvasHeader.endButton = {
Assigned: "End Task",
Reserved: undefined,
Wrapping: "Wrap up",
Completed: "Template1",
Canceled: "Template2",
Pending: "Template3"
};Removing a component conditionally (e.g., remove action button from TaskListItem if task is in state "wrapping")
Flex.DefaultTaskChannels.Call.removedComponents = [{
target: "TaskCanvasHeader",
key: "actions",
options: {
if: (props) => props.task.status === "wrapping"
}
}];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 by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.