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

If you want to customize any of the flows described here for your own use, you can paste the below descriptions into websequencediagrams.com and edit from there.

## Using chat and TaskRouter together

```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
```