Configuração do Flex UI (IU do Flex)

A configuração do Flex UI (IU do Flex) permite que você controle a maneira como o app geral é carregado, bem como o comportamento de Componentes do Flex individuais.

Os Componentes do Flex podem ser modificados de duas maneiras:

• por meio da componentProps no Objeto de configuração
• por meio da API defaultProps

Alterar a configuração para flex.twilio.com

O Objeto de configuração detalhado abaixo não está diretamente acessível ao usar flex.twilio.com. No entanto, todos os mesmos valores podem ser definidos como ui_attributes, usando a API REST de configuração do Flex.

Faça todas as atualizações na configuração atualizada. Por exemplo, você pode definir a propriedade ui_attributes para o valor {"logLevel": "debug"}. Depois de fazer as alterações, PUBLIQUE o novo objeto como sua configuração

ui_attributes é carregado mesmo para implantações auto‐hospedadas do Flex. Qualquer propriedade conflitante fornecida em um objeto de configuração appConfig têm precedência quando o Flex é carregado.

Observação: ao PUBLICAR o novo objeto, você pode receber um erro como o seguinte:

{
"code": 45004,
"message": "You are not allowed to modify property for [flex_service_instance_sid, runtime_domain, taskrouter_workspace_sid, service_version, taskrouter_offline_activity_sid, status].",
"more_info": "https://www.twilio.com/docs/errors/45004",
"status": 400
}

Esse erro indica que esses campos estão protegidos e não podem ser atualizados por meio da API. Para PUBLICAR as atualizações com êxito, remova esses campos do corpo PUBLICADO

Objeto de configuração

No objeto de configuração, você pode definir as propriedades padrão de componentes do Flex. Você também pode configurar propriedades que não estão vinculadas a componentes específicos.

Exemplo: public/assets/appConfig.js

var appConfig = {
  serviceBaseUrl: "https://dancing-owl-1234.twil.io/",
  sso: {
    accountSid: "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  },
  sdkOptions: {
      chat: {},
      insights: {},
      voice: {},
      worker: {}
  },
  logLevel: "debug",
  colorTheme: {
    baseName: "GreyDark",
    colors: {},
    light: false,
    overrides: {}
  },
  componentProps: {
    CRMContainer: {
      uriCallback: (task) => task
        ? `https://www.bing.com/search?q=${task.attributes.name}`
        : "http://bing.com"
    }
  },
  router: {
    type: "memory",
    history: {
      initialEntries: [ "/agent-desktop" ]
    }
  }
};

Algumas opções de configuração estão disponíveis apenas por meio do objeto de configuração. Veja a seguir a lista de todas as opções de configuração disponíveis.

colorTheme: string | object

Redefine o esquema de cores.

appConfig.colorTheme = {
  baseName: "GreyDark",
  colors: { base2: "red"},
  light: true,
  overrides: {
    MainHeader: {
      Container: {
        background: "green"
      }
    }
  }
};

componentProps: object

Ajusta as propriedades de componentes do Flex separados. Para obter uma lista de componentes disponíveis, consulte Componentes.

appConfig.componentProps = {
  AgentDesktopView: {
    showPanel2: false
  }
};

disableTransfers: boolean

Desativa as transferências de conferência.

appConfig.disableTransfers = false;

logLevel: string | number (Default: 'warn')

Define a especificidade da saída do registro. Pode ser um número ou uma correspondência de string:

• trace ou 0
• debug ou 1
• info ou 2
• warn ou 3
• error ou 4
• silent ou 5

appConfig.logLevel = 'info';

pluginService: object

Se os plugins devem ser carregados para modificar o Flex UI. Fornece um URL opcional para substituir a fonte de plugins padrão do Flex.

appConfig.pluginService = {
  enabled: true,
  url: "https://example.com/plugins-list.json"
};

router: object

Define o uso do navegador ou do roteamento na memória para o Flex.

appConfig.router = {
  type: "memory",
  history: {
    initialEntries: [ "/agent-desktop" ]
  }
};

sdkOptions: object

O Flex inicializa quatro SDKs padrão do Twilio, que podem ser acessados por meio do Flex Manager. Os sdkOptions serão enviados como parâmetros usados ao inicializar esses SDKs. (exemplo: parâmetros do Twilio.Device para voice)

appConfig.sdkOptions = {
  chat: {},
  insights: {},
  voice: {},
  worker: {}
};

serviceBaseUrl: string

Não usado no momento. Esse valor assume como padrão o Domínio de runtime associado à sua conta da Twilio. Essa é uma referência simples para Functions que você pode estar hospedando em solicitações de API de back‐end de energia.

sso: object

Permite suporte para autenticação e Single Sign-On, usando provedores de identidade de terceiros, como Okta.

appConfig.sso = { 
  accountSid: "ACxxx" // AccountSid of your Twilio project 
};

language: string

Não usado no momento.

API React defaultProps

Você também pode configurar propriedades padrão para componentes em um plugin usando a API React defaultprops de forma programática:

componentProps: { [Component Name]: { [Prop Name]: [PropValue] } }

Exemplo

flex.CRMContainer
  .defaultProps
  .uriCallback = (task) => task
    ? `https://www.bing.com/search?q=${task.attributes.name}`
    : "http://bing.com/";

flex.MainHeader
  .defaultProps
  .logoUrl = "https://static0.twilio.com/marketing/bundles/archetype.alpha/img/logo-wordmark--red.svg";

Veja a seguir a lista de componentes do Flex e os defaultProps que podem ser modificados.

IU do agente e do supervisor do Flex

CRMContainer

uri: string

O URI que é exibido no contêiner do CRM. Esse URI deve ser gerado pelo uriCallback.

uriCallback: (task: Task) => string

Um retorno de chamada que retorna um URI a ser exibido no contêiner do CRM com base em uma tarefa selecionada. Se você quiser substituir o componente CRMContainer por completo, use o método replace.

flex.CRMContainer
  .defaultProps
  .uriCallback = (task) => task
    ? `https://www.bing.com/search?q=${task.attributes.name}`
    : "http://bing.com/";

MainHeader

logoUrl: string

O URL do logotipo exibido no cabeçalho superior principal.

LoginView

logoUrl: string

O URL da imagem de exibição de início de sessão (por padrão, o logótipo Twilio).

TaskListContainer

staticTaskFilter: (task: Task) => boolean

Uma função de retorno de chamada que descreve a presença e a ordem de uma tarefa do Flex UI. Se uma tarefa retornar true (ou seja, uma tarefa estática ou "fixa" do Flex UI (IU do Flex) do usuário), aparecerá na seção superior do contêiner TaskList.

Por padrão, as chamadas recebidas e em tempo real são tratadas como tarefas estáticas.

TaskListItem

itemSize: 'Small' | 'Large' | 'LargeSelected'

O tamanho do item da lista de tarefas. Os valores incluem:

• Small (padrão): tamanho do item da lista de tarefas regular
• Large: todos os itens da lista de tarefas são 156px maiores em altura, permitindo informações personalizadas abaixo do conteúdo padrão do item da lista de tarefas por meio do modelo TaskExtraInfo
• LargeSelected: o item da lista de tarefas selecionado é exibido como Large (Grande), outros como Small (Pequeno)

MainContainer

keepSideNavOpen: boolean

Indica se o painel de visualização da barra lateral deve estar sempre visível. O padrão é false, que mostra a visualização somente depois que todo o app já foi carregado.

showNotificationBar: boolean

Se definido como false, as notificações do NotificationBar não serão exibidas. Leia mais sobre notificações na página Estrutura de notificações.

showLiveCommsBar: boolean

Exibe uma barra de chamadas recebidas em exibições diferentes da IU do agente.

TaskList

compareFunction: (task1: Task, task2: Task) => number

Um retorno de chamada para controlar como as tarefas devem ser classificadas na lista de tarefas. Um número negativo significa que task1 deve estar acima de task2. Um número positivo que task1 deve estar abaixo de task2. 0 indica prioridade igual.

AgentDesktopView

showPanel2: boolean

Quando definido como falso, removerá completamente a área do lado direito da exibição do agente, em que geralmente é exibido o CRM, incluindo o controle do divisor separando as áreas do lado esquerdo e direito.

splitterOptions: object

Permite a especificação dos valores padrão para o divisor horizontal principal na exibição do desktop do agente (separa a visualização esquerda da área do CRM para a direita). Os valores podem ser pixels ou %.

{
  initialFirstPanelSize?: string; 
  minimumFirstPanelSize?: string; 
  minimumSecondPanelSize?: string; 
}

AgentDesktopView.Panel1

splitterOrientation: 'auto' | 'vertical' | 'horizontal' (Default: auto)

Determina se a orientação do conteúdo será vertical, horizontal ou auto (automática) com base no tamanho do conteúdo.

AgentsDataTable

tablePlaceHolder: ReactNode

O elemento React a ser exibido quando a lista de agentes estiver vazia.

initialCompareFunction: (worker1: IWorker, worker2: IWorker) => number

Um retorno de chamada para controlar como os agentes devem ser classificados na lista de agentes. Um número negativo significa que worker1 deve estar acima de worker2. Um número positivo que worker1 deve estar abaixo de worker2. 0 indica prioridade igual.

WorkerCanvas

showSkill: boolean

Exibe a seção especialidades com as informações do agente.

WorkerProfile

details: Array<WorkerProfileDetail>

Inclui informações ao perfil do agente.

TaskCanvasHeader

icon: string | ReactNode

Uma imagem exibida no cabeçalho de uma tarefa. Se você fornecer uma string de ícone, ela precisará corresponder a um nome de ícone de uma lista de ícones do Flex.

ActionsComponent: ComponentType<{ task: ITask }>

Um componente de ação exibido no cabeçalho de uma tarefa. O padrão é um botão "end task" (finalizar tarefa).

titleTemplateContext: object

O objeto de contexto usado para renderizar o modelo de título da tarefa.

Tabs (Guias)

alignment: 'left' | 'center'

Define como o cabeçalho da guia é alinhado.

Componente de chat/mensagens do Flex UI (IU do Flex)

Essas propriedades se aplicam tanto à IU do desktop do agente do Flex quanto à IU da Twilio WebChat, em todos os lugares em que o componente chat/mensagem for usado.

MessagingCanvas

avatarCallback: (identity: string) => string

Função de retorno de chamada para retornar o URL do avatar de um membro.

memberDisplayOptions: object

Permite substituir nomes de participantes de chat; por ex., configurar agente para Agente e cliente para Cliente.

{
  yourDefaultName?: string;
  theirDefaultName?: string;
  yourFriendlyNameOverride?: boolean;
  theirFriendlyNameOverride?: boolean;
}

messageStyle: 'Rounded' | 'Squared' | 'Minimal'

Define o estilo visual da área de mensagens. As opções são Rounded (arredondo), Squared (quadrado) e Minimal (mínimo).

showReadStatus: boolean

Controla se o indicador de leitura da mensagem deve ser exibido.

showTypingIndicator: boolean

Controla se mostra "[SomeOne] is typing" ([Alguém] está digitando) no chat.

showWelcomeMessage: boolean

Controla se a mensagem de boas‐vindas deve ser exibida no início da conversa.

welcomeMessageText: string

O texto da mensagem de boas‐vindas a ser exibido.

showTrayOnInactive: boolean

Exibe o componente da barra de mensagens, indicando que o chat não está mais ativo sempre que o status do canal estiver inativo.

MessageListItem

useFriendlyName: boolean

Substitui o nome do participante do chat por um nome fácil.

MessageInput

areaStyle: 'Bubble' | 'Line' | 'Boxed'

O estilo visual do elemento de entrada de texto. As opções são Bubble (bolha), Line (linha) e Boxed (caixa).

returnKeySendsMessage: boolean

Se pressionar a tecla de retornar deve enviar uma mensagem.

MessageCanvasTray

showButton: boolean

Exibe o botão “Start new chat” (Iniciar novo chat) na barra.

onButtonClick: () => void

Um processador para um clique no botão “Start new chat” (Iniciar novo chat).

Configurar autenticação e Single Sign-On

Para configurar uma integração com um provedor de identidade e habilitar o Single Sign-On, defina

appConfig.sso = {
  accountSid: string; // AccountSid of your Twilio Project
  loginPopup: boolean; // whether to launch IdP login in new window
  loginPopupFeatures: string; // standard window.open() features param to be applied to popup window
};

O estado da sessão na Redux Store conterá:

• loginState: o estado do login
• ssoTokenPayload: a carga do token do provedor de identidade
• identity: identidade do usuário usada para o procedimento SSO
• loginError: caso ocorra um erro durante o login
• loginHandler: um objeto que contenha parâmetros do procedimento de login

Configurar a integração do CRM

CRM integrado a um iFrame controlado pelo Flex

uriCallback: (task: ITask) => string

A função de retorno de chamada que é chamada sempre que uma tarefa ativa for alterada. Você pode fornecer um URI do CRM para essa tarefa específica ou um URI constante.

flex.CRMContainer
  .defaultProps
  .uriCallback = (task) => task
    ? `https://www.bing.com/search?q=${task.attributes.name}`
    : "http://bing.com/";