![Descubra como personalizar o seu Huggy Chat utilizando os recursos da nossa API](https://cdn-b.huggy.io/2021/10/Personalizar-Huggy-Chat.jpg)
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:
- 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.
![Painel e chat de conversação para atendimento aos clientes de modo automatizado](https://cdn-b.huggy.io/2021/06/GIF1.gif)
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](https://cdn-b.huggy.io/2021/06/widget-1.png)
Na tela seguinte, acesse a opção +Adicionar um novo Widget:
![Adicionar um novo Widget](https://cdn-b.huggy.io/2021/06/widget-2.png)
Clique em Mais opções:
![Após, clique em Mais opções](https://cdn-b.huggy.io/2021/06/widget-3.png)
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](https://cdn-b.huggy.io/2021/06/widget-4.png)
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](https://cdn-b.huggy.io/2021/06/widget-5.png)
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](https://cdn-b.huggy.io/2021/06/widget-6.png)
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](https://cdn-b.huggy.io/2021/06/GIF2.gif)
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.](https://cdn-b.huggy.io/2021/06/cta_HuggyChat.png)