Configurar a IU do Flex WebChat
No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.
A Documentação gerada automaticamente para a IU do Flex WebChat agora está disponível como uma distribuição beta. A documentação gerada automaticamente é precisa e abrangente, mas pode ser diferente do que você vê na documentação oficial da IU do Flex WebChat.
Você pode alterar a aparência e o comportamento do Flex WebChat por meio das definições de configuração. Você pode substituir qualquer um dos valores de configuração padrão.
Há duas maneiras de configurar o Flex UI (IU do Flex):
- por meio da
componentProps
no Objeto de configuração - por meio da API defaultProps
Usando a Configuração Básica
A configuração básica permite que você faça personalizações simples nas opções de exibição e comportamento do WebChat. Com algumas linhas de código, você pode fazer alterações como:
- Mostrar ou ocultar o logotipo no cabeç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 é exibido
- Mostrar ou ocultar um indicador de digitação ou um recibo de leitura de mensagem
e muito mais.
Objeto de configuração
No objeto de configuração, você pode definir propriedades padrão para componentes do WebChat (listados abaixo) e também configurar propriedades que não estão vinculadas a componentes específicos.
Configuração padrã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 básicas de configuração do WebChat
Nome da variável | Tipo | Descrição |
accountSid |
string | O identificador da conta da Twilio à qual você deseja conectar a instância do WebChat. |
flexFlowSid |
string | O identificador exclusivo do Flex Flow que tratará as mensagens. |
chatFriendlyName |
string | Nome amigável para usar em canais de chat criados |
available | booleano | Disponibilidade do serviço de chat. Define se o EntryPoint deve ser exibido ou não |
logLevel |
string |
Especificidade da saída de registro 1 – 'debug' 2 – 'info' 3 – 'warn' 4 – 'error' 5 – 'silent' |
context |
json object | Objeto de contexto. Metadados que são passados ao back‐end sobre a solicitação |
colorTheme |
json object | Configuração do tema |
disableLocalStorage |
booleano | Configuração para desativar o armazenamento local |
preEngagementConfig |
json object | Formulário de pré-engajamento |
startEngagementOnInit |
booleano | Formulário de pré‐engajamento ativado/desativado |
componentProps |
json object |
Representa defaultProps de cada componente no WebChat Exemplo:
|
sdkOptions
|
json object | Ajustar parâmetros do SDK { voice: {}, worker: {}, chat: {}, insights: {} } |
markdownSupport |
json object |
Objeto de configuração para Suporte a markdown de chat
|
tokenServerUrl |
string | URL do servidor de token |
flexWebChannelsUrl |
string | URL do Flex WebChannels |
API de adereços padrão do React.
Você também pode configurar propriedades padrão para componentes usando a API React defaultprops.
componentProps: { [Component Name]: { [Prop Name]: [PropValue] } }
Exemplos de configuração de adereços para Componentes:
FlexWebChat.MainHeader.defaultProps.showImage = true;
Este exemplo define o logotipo a ser mostrado no cabeçalho principal
Adereços de componente
Você pode encontrar a lista completa de componentes do WebChat aqui. Abaixo estão as listas de adereços específicos de componentes para os seguintes componentes:
MainContainer
Nome do adereço | Tipo | Descrição |
---|---|---|
startEngagementOnInit | booleano | Formulário de pré-engajamento ativado, na inicialização do chat |
height | string | Altura do WebChat expandido |
width | string |
Largura do WebChat expandido |
bottom | string |
Distância da parte inferior do WebChat até a parte inferior da tela |
right | string |
Distância do WebChat do lado direito até a borda direita da tela |
EntryPoint
Nome do adereço | Tipo | Descrição |
---|---|---|
hideTaglineWhenExpanded | booleano |
Informa se a tagline precisa ser ocultada quando expandida |
iconClosed | string |
Representa o ícone a ser mostrado quando não expandido. Exemplo: "MessageBold" |
collapsedIconAriaProps | AriaProps |
Adereços de aria de ícone recolhido. |
openedIconAriaProps | AriaProps |
Adereços de aria de ícone aberto. |
iconExpanded | string |
Representa o ícone a ser exibido quando expandido. Exemplo: "ArrowDown" |
tagline | string |
Conteúdo da tagline |
MainHeader
Nome do adereço | Tipo | Descrição |
---|---|---|
titleText | string |
Substitui o título do cabeçalho do WebChat expandido |
imageUrl | string |
Substituir o logotipo do cabeçalho do WebChat expandido |
showTitle | booleano |
Se o título deve ser exibido no cabeçalho |
showImage | booleano |
Se o logotipo deve ser exibido no cabeçalho |
closeCallback | Function | Um retorno de chamada para acionar quando o botão fechar é clicado. Exemplo: closeCallback: () => {
Actions.invokeAction("MinimizeChat"); } |
MessagingCanvas
Nome do adereço | Tipo | Descrição |
---|---|---|
PredefinedMessage | json object |
Representa uma mensagem automática inicial, mostrada no chat. Veja abaixo um exemplo. |
avatarCallback | (identity: string) => string | Funçã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 área de mensagens. As opções são "Rounded", "Squared" e "Minimal" |
showReadStatus | booleano | Controla se o indicador de mensagem lida será exibido |
showTypingIndicator | booleano | Controla se [alguém] estiver digitando será exibido |
showWelcomeMessage | booleano | Controla se a mensagem de boas-vindas será exibida no iní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 não está mais ativo sempre que o status do canal estiver inativo |
charLimit | número |
Identifica o limite de caracteres para uma única mensagem |
inputDisabledReason | string |
Um motivo pelo qual o elemento de entrada está desativado |
autoInitChannel | MessagingCanvas.autoInitChannel |
Se o componente deve inicializar automaticamente o canal de chat se ainda não tiver sido inicializado. |
PredefinedMessage
PredefinedMessage representa uma mensagem automática inicial, mostrada no chat
- body – conteúdo da mensagem
- authorName – nome do autor
- isFromMe – se aparece como mensagem do usuário atual ou nã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 configuração de um autor de mensagem padrão em vez de usar o FriendlyName do membro:
{
yourDefaultName: 'You',
theirDefaultName: 'Agent',
yourFriendlyNameOverride: false,
theirFriendlyNameOverride: false
}
MessageListItem
Nome do adereço | Tipo | Descrição |
---|---|---|
useFriendlyName | booleano |
Substitui o nome do participante do chat por um nome amigável |
messageStyle | string |
Estilo visual da mensagem individual. As opções sã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 única mensagem. |
MessageInput
Nome do adereço | Tipo | Descrição |
---|---|---|
areaStyle | string | Estilo visual do elemento de entrada de texto. |
disabledReason | string | Um motivo pelo qual MessageInput está desabilitado. |
sendButtonAriaProps | AriaProps | Adereços de aria SendButton |
textAreaAriaProps | AriaProps | Adereços aria da área TextArea |
charLimit | número | Identifica o limite de caracteres para uma única mensagem. |
returnKeySendsMessage | booleano | Se pressionar a tecla retornar deve enviar uma mensagem |
useLocalState | booleano |
Se definido como verdadeiro, ele manté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 ação "SetInputText". |
MessageCanvasTray
Nome do adereço | Tipo | Descrição |
---|---|---|
showButton | booleano |
Apresenta um botão 'Iniciar novo chat' na bandeja |
onButtonClick | () => void | Um manipulador para um clique no botã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.