Desenvolver 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 de 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 de seus requisitos e resultados, você pode personalizar o widget de chat usando uma das seguintes opções:

• Usar o widget de chat ao vivo personalizável 2.0
• Desenvolver seu próprio widget

Usar o 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 sua imagem de 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 é criado com base no SDK do Chat Omnichannel e na Biblioteca de Componentes da Interface do Usuário do Widget de Chat Ao Vivo.

Desenvolvedor de Portais — Personalizar UI baseada em script padrão

A opção de desenvolvedor do portal permite personalizar a interface do usuário do widget de chat, mas não modifica as configurações de funcionalidade padrão no Centro de administração do Serviço Copilot. 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 do CSS para os componentes de chat com os mesmos precedentes da biblioteca de componentes de interface do usuário do widget de chat ao vivo do Omnicanal.

Editar script de widget de chat ao vivo para habilitar o widget de chat ao vivo 2.0

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

1. No centro de administração do Serviço Copilot, abra o fluxo de trabalho de chat e selecione Copiar Script do Widget de Chat Ao Vivo 2.0 para copiar o trecho de código.
2. Crie uma nova função JavaScript com toda a estilização dos componentes. Mais informações: widget de chat omnichannel
3. Adicione "v2" após o atributo de script.
4. Adicione "data-customization-callback" e referencie a função JavaScript.

O snippet de código atualizado terá a aparência a seguir.

Uma captura de tela de exemplo de um widget de chat 2.0 personalizado para aumentar seu tamanho é a seguinte.

Assista ao vídeo passo a passo do widget de chat ao vivo configurado.

Para personalizar o widget, use a orquestração de engajamento na web.

A orquestração de participação na Web permite mover as substituições de configuração para fora do JavaScript da sua página e para o centro de administração. Saiba mais em Implantar widgets de chat em sites usando uma única marca.

Desenvolver seu próprio widget

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

Biblioteca de componentes de UI para widget de chat ao vivo "omnichannel"

A biblioteca de componentes da interface do usuário do Widget de Chat Ao Vivo Omnichannel fornece uma estrutura para componentes reutilizáveis do React. Os componentes são criados usando a biblioteca de interface do usuário fluente. Saiba mais sobre a biblioteca de componentes da interface do usuário do widget de chat ao vivo omnichannel.

Omnichannel Chat SDK

O SDK do Chat Omnichannel é um pacote de software livre que fornece métodos e recursos de chat para adicionar funcionalidade a um widget de chat ao vivo. Saiba mais sobre o SDK do Chat Omnichannel.

Personalizar seu widget de chat ao vivo

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

Informações relacionadas

Personalizar o widgets de chat ao vivo para aplicativos móveis
startChat
closeChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued