Descubra como personalizar o seu Huggy Chat utilizando os recursos da nossa API
Em um passado não tão distante, as formas do cliente entrar em contato com a empresa eram basicamente por meio dos canais do "Fale Conosco". Só em ver aquele formulário de contato já dava um desânimo, certo? Isso porque, o retorno era demorado e a troca de e-mails ou telefonemas sem fim.
Com o avanço da tecnologia e com os clientes demandando cada vez mais agilidade e praticidade, o cenário foi modificando e as adaptações foram necessárias. Por isso, se a sua empresa possui um site, é muito importante oferecer opções simples e práticas de contato. Afinal, qualquer dificuldade percebida pode resultar em uma venda perdida e gerar, inclusive, insatisfação do seu cliente. E com certeza você não quer isso!
A boa notícia é que você não precisa passar por esses incômodos, já que nós, da Huggy, fornecemos um poderoso canal de conversação que vai de encontro com sua necessidade: o Huggy Chat. Essa tecnologia também conta com recursos adicionais para personalizar o chat de maneiras diversas e trabalhar em conjunto com outras tecnologias.
Então vamos conhecer, de maneira prática, como utilizar essa série de recursos do Painel da Huggy e também da API do Huggy Chat? Hoje você aprenderá os seguintes itens:
- Como configurar o Huggy Chat por meio do painel da Huggy;
- Como personalizar o comportamento do Huggy Chat.
Instalando o Huggy Chat em um site
Para demonstrar o processo de instalação e personalização do Huggy Chat, utilizaremos como exemplo uma escola de idiomas.
Essa escola possui uma página com informações básicas sobre o serviço e a empresa. Há a necessidade de utilizar um chat para atender os seus clientes de modo automatizado, além de permitir o contato com colaboradores para atender às demandas mais específicas.
A Huggy provê uma estrutura para que essa escola incorpore um chat no seu site. Oferecemos o código-fonte do Huggy Chat já pré-configurado e pronto para ser utilizado. Temos também uma série de funcionalidades extras que podem ser acrescentadas ao seu Huggy Chat por meio da nossa API.
Detalharemos algumas dessas possibilidades logo a seguir.
- Antes de configurar
Antes de configurar um Widget e adicioná-lo ao seu site, é importante estabelecer o fluxo de atendimento. Para isso, utilizamos o recurso de Flow da Huggy.
Se você ainda não conhece o Flow, clique aqui.
Criando e configurando um Widget
Efetue o login com as suas credenciais no painel da Huggy. Em seguida, acesse (1) Configurações > (2) Canais > (3) Widget:
Na tela seguinte, acesse a opção +Adicionar um novo Widget:
Clique em Mais opções:
Na tela seguinte, serão exibidas as opções para configuração do comportamento e também para a personalização do chat.
Insira um nome para o seu Widget, e depois estabeleça um Flow de entrada e um Flow de saída. Os outros campos disponíveis deverão ser utilizados de acordo com a sua necessidade.
Para mais informações sobre os Flows de Entrada e Saída, clique aqui.
Ainda nesta tela, existem opções adicionais que podem ser configuradas no chat. Neste momento, utilizaremos apenas as configurações destacadas. Clique em Salvar para gravar as configurações.
Pronto! Neste momento já temos todo o código necessário para inserir um chat dentro do site. O próximo passo é copiá-lo para o código HTML da página, antes do fechamento da tag </body>.
Como personalizar o comportamento do Huggy Chat
A API do Huggy Chat disponibiliza outras funcionalidades que podem ser adicionadas no código-fonte do site, permitindo que o Huggy Chat seja exibido de acordo com regras e estratégias por você definidas.
Imagine que esta escola gostaria de personalizar o comportamento do Huggy Chat. A intenção é só exibi-lo no momento em que o usuário clicar em Fale conosco. Quando isso ocorrer, o chat será aberto, pronto para iniciar a conversa.
Para efetuar esta configuração, utilizaremos os seguintes recursos da API do Huggy Chat:
| Huggy.openBox | Método que abre a janela do Huggy Chat, caso ela esteja fechada. |
| Huggy.hideButton | Método que oculta o botão do Huggy Chat na página. |
| afterLoad | Evento callback que é executado após o término do carregamento do Huggy Chat. |
| Huggy.subscribe | Método pelo qual o usuário se inscreve para escutar um determinada evento e executar uma função passada como parâmetro. |
Efetuando a configuração
1. Criando o botão “Fale conosco”.
O primeiro passo da nossa configuração é criar um HTML da página e atribuir ao evento do clique do mouse a chamada para uma função JavaScript. Essa função é responsável pela chamada do método Huggy.openBox.
O trecho de código em HTML do botão Fale Conosco fica assim:
2. Definindo a variável huggyChatLoaded
Para auxiliar uma validação que faremos na próxima etapa, criaremos uma variável booleana chamada huggyChatLoaded, inicializando-a com o valor false.
Ela receberá o valor true apenas quando o Huggy Chat estiver completamente carregado.
3. Criando a função openChat
A função openChat valida se o Huggy Chat já está totalmente carregado, por meio da variável huggyChatLoaded. Quando ela for true, o método Huggy.openBox é chamado. Quando false, um alerta é exibido na tela solicitando que o usuário aguarde por alguns instantes para realizar uma nova tentativa.
4. Acionando métodos após o carregamento do Huggy Chat
O último passo da nossa configuração é utilizar o evento callback afterLoad. Ele executará alguns procedimentos após o carregamento do Huggy Chat:
- Atualização da variável huggyChatLoaded para o valor true;
- Chamada do método Huggy.hideButton para ocultar o botão do Huggy Chat;
- Chamada do método Huggy.subscribe, responsável por escutar o evento box-closed. Caso o chat seja fechado pelo usuário, o botão é ocultado novamente.
Feito isso, a nossa configuração estará concluída. O resultado final será este aqui:
Exploramos neste artigo o potencial que o Huggy Chat tem de oferecer uma opção de contato simples e moderna para os seus clientes. E não para por aqui: nossa API conta com muitas outras opções que permitirão a você personalizar ainda mais o seu Atendimento Digital.