Twilio Custom Task Channel

Twilio
  • Task Channel Definition
    • To add a custom channel, you need to make changes in the following places:
      • Add a custom channel in TaskRouter
      • Trigger the custom channel to be routed to the agent
      • Define how the custom channel is rendered in the UI with Task Channel Definition API
    • All task channels that Flex handles are defined and registered by the Task Channels API. Flex registers its default Task Channel definitions (see below), but users and plugins can register their own.
    • When task-based components are rendered, the first matching channel definition for a given task will be used. If there is more than one channel definition match for a task, then the most recently registered definition will be used. This allows you to register a more specific channel definition to override the behavior of a general one.
    • Predefined Task Channels definitions are available via Twilio.Flex.DefaultTaskChannels objects for reference. (.Call, .Chat, .ChatSms, .Default)
    • Custom channel can be created with a template
  • Twilio Custom Chat Channel
    • code in github
    • blog
    • To get a new channel integrated, you’ll need to do the following:
      • Create a new Twilio Studio Flow (optional)
        •  “Send to Flex Widget”
          • Workflow: “Assign to Anyone”
          • Channel: “Programmable Chat”
          • Attributes: Paste the following: {"name": "{{trigger.message.ChannelAttributes.from}}", "channelType": "web", "channelSid": "{{trigger.message.ChannelSid}}"}
      • Create a new Flex Flow associating it to the Twilio Studio Flow (either the default one or the one you created) and the “Flex Chat Service”
        • Flex Flows cannot be created directly in the console. Instead, we are going to use the Twilio CLI. 
          • $ twilio api:flex:v1:flex-flows:create \
--friendly-name="Custom Webchat Flex Flow" \
--channel-type=custom \
--integration.channel=studio \
--chat-service-sid=<Flex Chat Service SID> \
--integration.flow-sid=<Flex Studio Flow SID> \
--contact-identity=custom \
--enabled
      • Implement a middleware that is going to receive messages from your chat channel and send them to Twilio.
        • We need two functions in the middleware: createNewChannel() and sendChatMessage().
          • createNewChannel() – This function uses the Flex API to create a new channel and configure a webhook that gets called when a message is added to the channel.
          • sendChatMessage() – This function sends the actual message to the Flex Chat. For this function to trigger the creation of a new task, we need to make sure that the webhook gets called when a new message is added.