---
"@context": https://schema.org
"@type": TechArticle
"@id": https://www.twilio.com/docs/taskrouter/contact-center-blueprint/chat-taskrouter-web-sequence-diagrams#article
headline: Using Chat and TaskRouter together | Appendix | Web Sequence Diagrams
description: Web sequence diagram for using Programmable Chat with TaskRouter, showing the flow from a customer starting a chat to an agent handling and completing the task.
url: https://www.twilio.com/docs/taskrouter/contact-center-blueprint/chat-taskrouter-web-sequence-diagrams
inLanguage: en
dateModified: 2026-07-20T14:57:47.000Z
author:
  "@type": Organization
  name: Twilio Developer Education Team
publisher:
  "@type": Organization
  name: Twilio
---

# Using Chat and TaskRouter together | Appendix | Web Sequence Diagrams

To customize any of the flows described here for your own use, paste the descriptions below into [websequencediagrams.com](https://www.websequencediagrams.com/) and edit from there.

## Using chat and TaskRouter together

The following web sequence diagram shows the flow for handling a chat conversation with TaskRouter, from a customer starting a chat session to an agent completing the task.

```text
title Chat with TaskRouter

Customer->+App: Customer starts chat session in UI
App->Twilio: Chat channel is created
App->-Twilio: Task is created in Taskrouter
note right of App: Chat information is \n stored in task attributes
note right of Twilio: Taskrouter searches for available agent
Agent->+Twilio: Agent comes online
alt If Using SDK
Twilio->Agent: Task is assigned to agent
else If using assignment callbacks
Twilio-->-App: Task is assigned to agent
end
Agent->Twilio: Agent joins chat channel
note over Agent, Customer: Agent & Customer chat
Customer->+App: Customer ends chat in UI
App->+Twilio: Task marked complete
Twilio->Agent: Agent marked as available
App->Twilio: Chat channel closed
Twilio->App: Chat session ended
Twilio->-App: store chat transcript in  CRM
```