Twilio Flex: Build a Customizable Cloud Contact Center

# Flex setup happens mostly in the Console
# 1. Go to Twilio Console > Flex > Setup
# 2. Create a Flex workspace
# 3. Configure phone number as Flex channel
# 4. Invite agents

# Programmatic setup: create task queue
from twilio.rest import Client
import os

client = Client(
    os.environ["TWILIO_ACCOUNT_SID"],
    os.environ["TWILIO_AUTH_TOKEN"]
)

workspace_sid = "WSxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# Create a task queue
def create_task_queue(workspace_sid, friendly_name, target_workers):
    queue = client.taskrouter.workspaces(workspace_sid) \
        .task_queues.create(
            friendly_name=friendly_name,
            target_workers=target_workers,
            max_reserved_workers=2
        )
    print(f"Queue: {queue.sid}")
    print(f"Name: {queue.friendly_name}")
    print(f"Target: {queue.target_workers}")
    return queue

support_queue = create_task_queue(
    workspace_sid,
    "Technical Support",
    "skills HAS 'support'"
)
# Expected output:
# Queue: WQxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# Name: Technical Support
# Target: skills HAS 'support'

// Flex uses Studio Flow Builder for IVR
// This can be created via the Console drag-and-drop or via API

// Simplified Studio Flow JSON (conceptual):
const ivrFlow = {
  "description": "DodaTech Support IVR",
  "states": [
    {
      "name": "Trigger",
      "type": "trigger",
      "transitions": [
        {"event": "incomingCall", "next": "Welcome"}
      ]
    },
    {
      "name": "Welcome",
      "type": "say-play",
      "properties": {
        "say": "Thank you for calling DodaTech support. Press 1 for billing, 2 for technical support, 3 for sales."
      },
      "transitions": [
        {"event": "audioComplete", "next": "GatherInput"}
      ]
    },
    {
      "name": "GatherInput",
      "type": "gather-input-on-calls",
      "properties": {
        "say": "",
        "stop_gather": false,
        "num_digits": 1,
        "timeout": 5
      },
      "transitions": [
        {"event": "keypress", "next": "RouteCall"},
        {"event": "timeout", "next": "DefaultMessage"}
      ]
    }
  ]
};

console.log("Studio Flow configured for Flex IVR");

// Flex plugins are React components that extend the agent workspace
// Built with @twilio/flex-ui and @twilio/flex-plugin-builder

// Plugin structure:
/*
src/
  DodaTechCrmPlugin/
    DodaTechCrmPlugin.js
    components/
      CustomerPanel.js
      OrderHistory.js
    styles/
      Panel.css
*/

// DodaTechCrmPlugin.js
const Flex = require('@twilio/flex-ui');

class DodaTechCrmPlugin extends Flex.Plugin {
    init(flex, manager) {
        // Add custom CRM panel to task sidebar
        flex.CRMContainer.Content.add(
            <CustomerPanel key="dodatech-crm" />,
            { sortOrder: -1 }
        );

        // Customize task card with order information
        flex.TaskCard.Content.add(
            <OrderInfo key="order-info" />,
            { sortOrder: 1 }
        );

        // Add custom action
        flex.Actions.registerAction('TransferWithContext', async (payload) => {
            const { task, targetSid } = payload;
            await flex.Actions.invokeAction('TransferTask', {
                task,
                targetSid,
                options: { notes: task.attributes.conversation_summary }
            });
        });

        console.log('DodaTech CRM Plugin initialized');
    }
}

module.exports.init = (flex, manager) => {
    new DodaTechCrmPlugin().init(flex, manager);
};

# Configure Workflow for task routing
def create_workflow(workspace_sid, queue_sids):
    workflow = client.taskrouter.workspaces(workspace_sid) \
        .workflows.create(
            friendly_name="DodaTech Support Flow",
            configuration={
                "task_routing": {
                    "filters": [
                        {
                            "filter_friendly_name": "Technical Support",
                            "expression": "task_type == 'support'",
                            "targets": [{
                                "queue": queue_sids["support"],
                                "priority": 50,
                                "timeout": 120
                            }]
                        },
                        {
                            "filter_friendly_name": "Billing",
                            "expression": "task_type == 'billing'",
                            "targets": [{
                                "queue": queue_sids["billing"],
                                "priority": 80,
                                "timeout": 120
                            }]
                        }
                    ],
                    "default_filter": {
                        "queue": queue_sids["general"]
                    }
                }
            }
        )
    print(f"Workflow: {workflow.sid}")
    print(f"Name: {workflow.friendly_name}")
    return workflow

# workflow = create_workflow(workspace_sid, {"support": "WQxxx", "billing": "WQyyy", "general": "WQzzz"})
# Expected output:
# Workflow: WWxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# Name: DodaTech Support Flow