Base de Conhecimento

Back to support overview

Este caso de uso descreve um exemplo de implementação de vários métodos do WebChat SDK.

O exemplo apresenta um botão Ajuda no site, que se for clicado abre o webchat e aciona um fluxo específico.

Etapas

1. Crie o Fluxo a ser enviado ao usuário.

Este guia pressupõe que você já criou um fluxo de acordo com seus desejos.

Como exemplo, temos um Fluxo muito simples aqui que solicita ao usuário que confirme se deseja ajuda. Se sim, o fluxo os irá atribuir a um agente.

Para saber como construir seu próprio fluxo, consulte este artigo.

Enquanto o editor de fluxo estiver aberto, copie a Flow ID para uso posterior. A Flow ID pode ser encontrado no url:

 https://app.chatvisor.com/#/entities/flows/show/<FLOWID>.

Neste exemplo, nosso Flow ID is 5f17ecec3564c64604a1cc4b.

2. Implemente os métodos SDK em seu site

Primeiro, precisamos implementar no site os métodos da API 'Open Chat' e 'Trigger Flow'. A documentação deles pode ser encontrada aqui.

HTML

Aqui, criamos o botão que abrirá a janela de chat e acionará um fluxo.

 <button onclick="getHelp()">Need help?</button>

JavaScript

É aqui que implementamos os métodos SDK.

/** 
* open webchat and trigger 'Customer Help' flow
*/
function getHelp() {
    CV.webchat.open();
    CV.webchat.triggerFlow("5f17ecec3564c64604a1cc4b");
}

Isso abrirá a janela do WebChat e acionará um fluxo, oferecendo ao cliente uma forma rápida de entrar em contato com um agente, se for preciso.

A documentação sobre o CV.webchat.open() e CV.webchat.triggerFlow() podem ser encontradas aqui.

3. Confira o resultado

Se o usuário clicar neste botão no site, o chat será aberto e exibirá o fluxo como este:

Outros casos possíveis

Este caso de uso usa apenas Open Chat e Trigger Flow, mas também existem métodos Show/Hide Chat que permitem ocultar ou mostrar completamente o botão do chat.

Com isso, e com Flows ou ActionRules, muitos mais casos de uso são possíveis.

  • Mostrar o WebChat apenas depois que o usuário rolar até um determinado ponto da página (JS, API Open Chat)
  • Se o cliente clicar em um botão Ajuda, responda com uma mensagem, marque o cliente, atribua-o a uma equipe específica e peça suas informações de contato (elementos JS, API Trigger Flow, fluxo com route to e user input)
  • Habilitar o WebChat apenas com base nas informações do usuário, como desktop/celular, idioma, site de referência ou sistema de busca (JS, API Show Chat)
  • Habilitar o WebChat depois que o usuário aceitar seus cookies (JS, API Open Chat)
  • Tenha um botão em seu site que abre o chat