Descubra como personalizar o seu Huggy Chat utilizando os recursos da nossa API

Descubra como personalizar o seu Huggy Chat utilizando os recursos da nossa API

Quer personalizar o Atendimento Digital do seu site? Com o Huggy Chat é possível, de maneira prática e intuitiva, utilizando os recursos da API da nossa ferramenta


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:

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.

Painel e chat de conversação para atendimento aos clientes de modo automatizado
Painel e chat de conversação para atendimento aos clientes de modo automatizado

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:

Acesse (1) Configurações > (2) Canais > (3) Widget
Acesse (1) Configurações > (2) Canais > (3) Widget

Na tela seguinte, acesse a opção +Adicionar um novo Widget:

Adicionar um novo Widget
Adicionar um novo Widget

Clique em Mais opções:

Após, clique em Mais opções
Após, 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.

Definição do nome e Flows de Entrada e Saída
Definição do nome e Flows de Entrada e Saída

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.

Salvar para utilizar apenas as configurações destacadas
Salvar para utilizar apenas as configurações destacadas 

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>.

Código HTML gerado
Código HTML gerado

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.

Huggy Chat em execução, garantindo o atendimento automatizado e ágil
Huggy Chat em execução, garantindo o atendimento automatizado e ágil


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.

Consulte agora mesmo a nossa documentação e conheça todos os recursos da API do Huggy Chat clicando no banner abaixo:

Clique aqui para acessar a documentação da API do Huggy Chat.
Calebe Ribeiro
Autor(a)

Calebe Ribeiro

Analista de Incidentes