WebChat Actions

O que é o framework Actions?

O framework Actions permite implementar alterações programáticas na Flex WebChat UI que são acionadas em determinados eventos. Você pode registrar eventos antes ou depois de uma ação ser ativada ou até mesmo substituir o comportamento de uma Action.

O que você pode fazer com o framework Actions?

• Substituir ações nativas
• Chamar ações de seus componentes personalizados
• Toque em antes e depois dos eventos de ação
• Registre suas ações personalizadas e use-as em seus componentes personalizados

Saiba mais sobre a estrutura de ações em Flex UI - Framework Actions

WebChat Actions

Geral

• StartEngagement – carga útil: {formData?: any} – publica os dados do formulário no url startEngagement para prosseguir para o estado em engajamento.
• RestartEngagement – remove o usuário do canal de chat e retorna a uma fase de pré‐engajamento.
• ToggleChatVisibility – alterna a visibilidade do widget de chat entre a exibição minimizada e expandida.
• MinimizeChat – minimiza o widget de chat

Chat:

Essas Actions precisam de um parâmetro Channel ou channelSid.

• SendMessage – carga útil: {channel?: ChannelState, channelSid?: string, body: string, messageAttributes?: any} – envia uma mensagem com o corpo para o canal definido por ChannelState.
• SetInputText – carga útil: {channel?: ChannelState, channelSid?: string, body: string} – define o campo de edição da mensagem para o corpo na UI do chat para Channel ChannelState.
• SendTyping – carga útil: {channel?: ChannelState, channelSid?: string} – envia a execução do indicador de digitação para outra parte no canal.

Exemplo de uso de um evento "after" de uma Action

Postar uma mensagem em nome do usuário no chat, depois que a conversa foi iniciada, tocando no evento pós‐ação StartEngagement

FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
  const { channelSid } = manager.store.getState().flex.session;
  manager.chatClient.getChannelBySid(channelSid)
    .then(channel => {
      channel.sendMessage("My awesome message");
    })
})