Configurar a IU do Flex WebChat

No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.

A Documentação gerada automaticamente para a IU do Flex WebChat agora está disponível como uma distribuição beta. A documentação gerada automaticamente é precisa e abrangente, mas pode ser diferente do que você vê na documentação oficial da IU do Flex WebChat.

Você pode alterar a aparência e o comportamento do Flex WebChat por meio das definições de configuração. Você pode substituir qualquer um dos valores de configuração padrão.

Há duas maneiras de configurar o Flex UI (IU do Flex):

por meio da componentProps no Objeto de configuração
por meio da API defaultProps

Usando a Configuração Básica

A configuração básica permite que você faça personalizações simples nas opções de exibição e comportamento do WebChat. Com algumas linhas de código, você pode fazer alterações como:

Mostrar ou ocultar o logotipo no cabeçalho
Alterar as propriedades de qualquer componente de WebChat
Passar o contexto para roteamento ou para ser exibido para um agente
Configurar como o autor da mensagem é exibido
Mostrar ou ocultar um indicador de digitação ou um recibo de leitura de mensagem

e muito mais.

Objeto de configuração

No objeto de configuração, você pode definir propriedades padrão para componentes do WebChat (listados abaixo) e também configurar propriedades que não estão vinculadas a componentes específicos.

Configuração padrão do WebChat

const defaultConfiguration: Config = {
    disableLocalStorage: false,
    available: true,
    colorTheme: {
        baseName: "BlueMediumTheme"
    },
    componentProps: {
        MessagingCanvas: {
            avatarCallback: (identity: string) => SessionActions.getAgentAvatar(identity),
            showTrayOnInactive: true
        },
        MessageCanvasTray: {
            onButtonClick: () => Actions.invokeAction("RestartEngagement")
        }
    },
    tokenServerUrl: "https://iam.twilio.com/v1/Accounts/{accountSid}/Tokens",
    flexWebChannelsUrl: "https://flex-api.twilio.com/v1/WebChannels",
    context: {
        friendlyName: "Anonymous"
    },
    startEngagementOnInit: true,
    sdkOptions: {
        chat: {}
    }
};

Propriedades básicas de configuração do WebChat

Nome da variável	Tipo	Descrição
accountSid	string	O identificador da conta da Twilio à qual você deseja conectar a instância do WebChat.
flexFlowSid	string	O identificador exclusivo do Flex Flow que tratará as mensagens.
chatFriendlyName	string	Nome amigável para usar em canais de chat criados
available	booleano	Disponibilidade do serviço de chat. Define se o EntryPoint deve ser exibido ou não
logLevel	string	Especificidade da saída de registro 0 – 'trace' 1 – 'debug' 2 – 'info' 3 – 'warn' 4 – 'error' 5 – 'silent'
context	json object	Objeto de contexto. Metadados que são passados ao back‐end sobre a solicitação
colorTheme	json object	Configuração do tema
disableLocalStorage	booleano	Configuração para desativar o armazenamento local
preEngagementConfig	json object	Formulário de pré-engajamento
startEngagementOnInit	booleano	Formulário de pré‐engajamento ativado/desativado
componentProps	json object	Representa defaultProps de cada componente no WebChat Exemplo: `componentProps: {` `MessagingCanvas: {` `avatarCallback:(identity:string)=>SessionActions.getAgentAvatar(identity),` `showTrayOnInactive:true},` `MessageCanvasTray: {onButtonClick:()=>Actions.invokeAction("RestartEngagement")` `}` `},`
sdkOptions	json object	Ajustar parâmetros do SDK { voice: {}, worker: {}, chat: {}, insights: {} }
markdownSupport	json object	Objeto de configuração para Suporte a markdown de chat `{` `enabled: true` `}`
tokenServerUrl	string	URL do servidor de token
flexWebChannelsUrl	string	URL do Flex WebChannels

API de adereços padrão do React.

Você também pode configurar propriedades padrão para componentes usando a API React defaultprops.

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

Exemplos de configuração de adereços para Componentes:

FlexWebChat.MainHeader.defaultProps.showImage = true;

Este exemplo define o logotipo a ser mostrado no cabeçalho principal

Adereços de componente

Você pode encontrar a lista completa de componentes do WebChat aqui. Abaixo estão as listas de adereços específicos de componentes para os seguintes componentes:

MainContainer
EntryPoint
MainHeader
MessagingCanvas
MessageListItem
MessageInput
MessageCanvasTray

MainContainer

Nome do adereço	Tipo	Descrição
startEngagementOnInit	booleano	Formulário de pré-engajamento ativado, na inicialização do chat
height	string	Altura do WebChat expandido
width	string	Largura do WebChat expandido
bottom	string	Distância da parte inferior do WebChat até a parte inferior da tela
right	string	Distância do WebChat do lado direito até a borda direita da tela

EntryPoint

Nome do adereço	Tipo	Descrição
hideTaglineWhenExpanded	booleano	Informa se a tagline precisa ser ocultada quando expandida
iconClosed	string	Representa o ícone a ser mostrado quando não expandido. Exemplo: "MessageBold"
collapsedIconAriaProps	AriaProps	Adereços de aria de ícone recolhido.
openedIconAriaProps	AriaProps	Adereços de aria de ícone aberto.
iconExpanded	string	Representa o ícone a ser exibido quando expandido. Exemplo: "ArrowDown"
tagline	string	Conteúdo da tagline

MainHeader

Nome do adereço	Tipo	Descrição
titleText	string	Substitui o título do cabeçalho do WebChat expandido
imageUrl	string	Substituir o logotipo do cabeçalho do WebChat expandido
showTitle	booleano	Se o título deve ser exibido no cabeçalho
showImage	booleano	Se o logotipo deve ser exibido no cabeçalho
closeCallback	Function	Um retorno de chamada para acionar quando o botão fechar é clicado. Exemplo: closeCallback: () => { Actions.invokeAction("MinimizeChat"); }

MessagingCanvas

Nome do adereço	Tipo	Descrição
PredefinedMessage	json object	Representa uma mensagem automática inicial, mostrada no chat. Veja abaixo um exemplo.
avatarCallback	(identity: string) => string	Função de retorno de chamada para retornar o URL do avatar de um membro
memberDisplayOptions	json object	Permite substituir os nomes dos participantes do chat, por exemplo, configurar o agente para Agent e o cliente para Customer. Veja um exemplo abaixo.
messageStyle	string	Define o estilo visual da área de mensagens. As opções são "Rounded", "Squared" e "Minimal"
showReadStatus	booleano	Controla se o indicador de mensagem lida será exibido
showTypingIndicator	booleano	Controla se [alguém] estiver digitando será exibido
showWelcomeMessage	booleano	Controla se a mensagem de boas-vindas será exibida no início da conversa
welcomeMessageText	CompiledTemplate	Texto exibido como uma mensagem de boas‐vindas
showTrayOnInactive	booleano	Exibe o componente da bandeja de mensagens, indicando que o chat não está mais ativo sempre que o status do canal estiver inativo
charLimit	número	Identifica o limite de caracteres para uma única mensagem
inputDisabledReason	string	Um motivo pelo qual o elemento de entrada está desativado
autoInitChannel	MessagingCanvas.autoInitChannel	Se o componente deve inicializar automaticamente o canal de chat se ainda não tiver sido inicializado.

PredefinedMessage

PredefinedMessage representa uma mensagem automática inicial, mostrada no chat

body – conteúdo da mensagem
authorName – nome do autor
isFromMe – se aparece como mensagem do usuário atual ou não

Desligando o PredefinedMessage:

FlexWebChat.MessagingCanvas.defaultProps.predefinedMessage = false;

memberDisplayOptions

Permite substituir os nomes dos participantes do chat, por exemplo, configurar o agente para Agent e o cliente para Customer.

Exemplo de configuração de um autor de mensagem padrão em vez de usar o FriendlyName do membro:

{

  yourDefaultName: 'You',

  theirDefaultName: 'Agent',

  yourFriendlyNameOverride: false,

  theirFriendlyNameOverride: false

}

MessageListItem

Nome do adereço	Tipo	Descrição
useFriendlyName	booleano	Substitui o nome do participante do chat por um nome amigável
messageStyle	string	Estilo visual da mensagem individual. As opções são "Rounded", "Squared" e "Minimal"
authorName	string	Um nome de autor personalizado a ser usado
useFriendlyName	booleano	Usa FriendlyName como nome do autor em vez de AuthorName personalizado
avatarUrl		URL para o avatar do autor
mensagem		Um objeto que representa uma única mensagem.

MessageInput

Nome do adereço	Tipo	Descrição
areaStyle	string	Estilo visual do elemento de entrada de texto.
disabledReason	string	Um motivo pelo qual MessageInput está desabilitado.
sendButtonAriaProps	AriaProps	Adereços de aria SendButton
textAreaAriaProps	AriaProps	Adereços aria da área TextArea
charLimit	número	Identifica o limite de caracteres para uma única mensagem.
returnKeySendsMessage	booleano	Se pressionar a tecla retornar deve enviar uma mensagem
useLocalState	booleano	Se definido como verdadeiro, ele mantém o valor da mensagem no estado do componente local, em vez do estado Redux. Defina‐o como falso se quiser definir o valor de entrada usando a ação "SetInputText".

MessageCanvasTray

Nome do adereço	Tipo	Descrição
showButton	booleano	Apresenta um botão 'Iniciar novo chat' na bandeja
onButtonClick	() => void	Um manipulador para um clique no botão 'Iniciar novo chat'

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Precisa de ajuda?

Obrigado pelo seu feedback!

Obrigado pelo seu feedback!