You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

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):

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

0 – 'trace'

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:

componentProps: {

MessagingCanvas: {

avatarCallback:(identity:string)=>SessionActions.getAgentAvatar(identity),

showTrayOnInactive:true},

MessageCanvasTray: {onButtonClick:()=>Actions.invokeAction("RestartEngagement")

}

},

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

{
enabled: true
}

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'

Classifique esta página:

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.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

thanks-feedback-gif