Desenvolva um widget de chat ao vivo personalizado

A Microsoft fornece uma opção para criar um widget de chat ao vivo personalizado que você pode anexar à sua conta do Atendimento ao Cliente do Dynamics 365. Cada componente do widget de chat ao vivo personalizado pode ser personalizado para funcionalidade e interface do usuário.

Dependendo da sua exigência e resultado, você pode personalizar o widget de chat usando uma das seguintes opções:

• Use widget de chat ao vivo personalizável 2.0
• Desenvolva seu próprio widget

Use widget de chat ao vivo personalizável 2.0

O widget de chat ao vivo personalizável 2.0 permite editar todos os elementos do widget, como fonte, cores e estilo para que você possa combinar o widget com a imagem da sua marca. O widget personalizado ajuda você a cultivar confiança e credibilidade, distinguir sua marca, promover conexões emocionais positivas e aumentar o valor que os clientes atribuem ao seu produto.

O novo widget de chat ao vivo 2.0 foi criado com base no SDK do Chat Omnichannel e na Biblioteca de Componentes da Interface do Usuário do Widget de Chat ao Vivo.

Programador do Portal — personalizar IU com base em scripts pronta a utilizar

A opção de programador do portal permite personalizar a IU do widget de chat, mas não modifica as definições de funcionalidade de origem no Centro de Administração do Copilot Service. Para personalizar, você pode usar o script "data-customization-callback" que conecta o widget pronto para uso a uma função JavaScript. A função pode conter personalizações de estilo CSS para os componentes de chat com os mesmos precedentes que a biblioteca de Componentes da IU do Widget de Chat em Direto do Omnicanal.

Editar o script do widget de chat ao vivo para ativar o widget de chat ao vivo 2.0

Para usar o widget de chat ao vivo 2.0 e a personalização baseada em script, modifique o trecho de código do widget de bate-papo ao vivo 2.0 pronto para uso da seguinte maneira.

1. No Centro de administração do Copilot Service, abra o fluxo de trabalho do chat e selecione Copiar script do Live Chat Widget 2.0 para copiar o trecho de código.
2. Crie uma nova função JavaScript com todos os estilos de componentes. Para obter mais informações: Widget de bate-papo omnichannel
3. Adicione "v2" após o atributo script.
4. Adicione "data-customization-callback" e faça referência à função JavaScript.

O trecho de código atualizado terá a seguinte aparência.

Um exemplo de captura de tela de um widget de chat 2.0 que é personalizado para aumentar seu tamanho é o seguinte.

Assista ao vídeo passo a passo da configuração do widget de bate-papo ao vivo.

Use a orquestração de engajamento na Web para personalizar o widget

A orquestração da interação Web permite-lhe mover as substituições de configuração do JavaScript da página para o centro de administração. Saiba mais em Implantar widgets de bate-papo em sites usando uma única tag.

Desenvolva seu próprio widget

Use as informações nas seções a seguir para criar seu próprio widget.

Biblioteca de Componentes de IU de Widget de Chat em Direto Omnicanal

A biblioteca de componentes da interface do usuário do Omnichannel Live Chat Widget fornece uma estrutura de componentes reutilizáveis do React. Os componentes são criados usando a biblioteca Fluent UI. Saiba mais sobre a biblioteca de componentes da interface de utilizador do widget de bate-papo ao vivo omnichannel.

SDK de Chat Omnicanal

O SDK de bate-papo omnichannel é um pacote de código aberto que fornece métodos e recursos de bate-papo para adicionar funcionalidade a um widget de bate-papo ao vivo. Saiba mais sobre o SDK de bate-papo omnichannel.

Personalize seu widget de bate-papo ao vivo

Depois de instalar a versão mais recente do SDK de Chat Omnichannel, personalize seu widget de bate-papo ao vivo usando os métodos do SDK de Chat Omnichannel e editando os estilos CSS básicos dos Componentes da Interface do Usuário do Widget de Chat ao Vivo Omnichannel.

Informações adicionais

Personalize widgets de bate-papo ao vivo para aplicativos móveis
startChat
closeChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued