Conteúdos sobre Atendimento Digital, Chatbots, Qualidade no Atendimento, WhatsApp Business API e outros temas que podem potencializar seu negócio.

Este artigo ajudará você a melhorar a experiência de navegação em seu site, adaptando o layout do botão do Huggy Chat de acordo com o tamanho da tela dos dispositivos utilizados pelos seus clientes.


Com a variedade atual de dispositivos que são capazes de acessar a internet, sua empresa deve estar atenta ao modo como suas páginas são exibidas em diferentes tamanhos de tela.

Seus clientes e potenciais clientes buscam uma boa experiência de comunicação no seu site. Nos dias atuais, é impossível prever se eles utilizam um computador, smartphone ou até uma Smart TV.

Uma solução para este caso é oferecida pelo Design Responsivo, uma abordagem que se preocupa com a elaboração de páginas que se adaptem a telas com dimensões distintas, entregando sempre uma experiência de leitura e navegação agradável para o usuário.

A API do Huggy Chat possui recursos que permitem controlar como e quando o botão do Huggy Chat será exibido na tela. Eles podem ser utilizados para criar uma experiência responsiva e personalizar o chat de acordo com as particularidades do seu site.

Neste artigo, mostraremos na prática como tornar o botão do Huggy Chat responsivo. Ele está estruturado da seguinte forma:

O nosso objetivo

Nossa intenção é oferecer uma boa experiência de leitura e navegação independentemente do dispositivo que o usuário utilize para acessar o seu site.

Para atingir esse objetivo, desenvolveremos dois botões: um botão padrão, com proporções maiores e destinado aos usuários que acessarão o seu site pelo computador, e um botão mais compacto, pensado principalmente para a navegação em dispositivos móveis.

O resultado esperado é este aqui:

Para efetuar essa 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.showButton Método que mostra o botão do Huggy Chat na página.
Huggy.hideButton Método que oculta o botão do Huggy Chat na página.
Huggy.subscribe Método pelo qual o usuário se inscreve para escutar um determinado evento e executar uma função passada como parâmetro.
afterLoad Evento callback que é executado após o término do carregamento do Huggy Chat.

O passo a passo da configuração

1. Definindo a aparência do botão padrão

O primeiro passo é definir a aparência do botão padrão do Huggy Chat, voltado para a exibição em computadores e dispositivos com telas maiores.

Caso você precise apenas alterar o layout do botão no seu site, utilize o seguinte procedimento. Note que, neste caso, o botão terá a mesma aparência em qualquer tela.

Acesse o menu Personalizações > Canais > Widget e selecione o Huggy Chat desejado. Nesta página, ajustaremos a cor do botão, a mensagem que será exibida junto ao ícone do Huggy Chat e o tipo do botão.

Feita essa configuração, o resultado será este aqui:

2. Definindo as dimensões da versão compacta do botão

Por questões de acessibilidade, é uma boa prática estar atento ao tamanho dos botões presentes no seu sistema.

A W3C, comunidade internacional que estabelece alguns padrões para o desenvolvimento Web, recomenda que todos os elementos que o usuário pode interagir por meio do toque ou clique do mouse devem preencher um espaço de pelo menos 44 X 44 CSS pixels (px).

Para conhecer as diretrizes de desenvolvimento web da W3C, clique aqui.

Levaremos em consideração a recomendação da W3C para definir as proporções da versão compacta do botão do Huggy Chat. Utilizaremos uma imagem no formato PNG para representá-lo:

Podemos atribuir um estilo à imagem por meio de CSS, definindo as proporções do botão e o posicionamento em tela.

Nosso exemplo utiliza o seguinte CSS:


3. Iniciando o Huggy Chat ao clicar no novo botão

No código HTML referente ao botão, adicionamos o evento onclick para chamar o método Huggy.openBox disponibilizado pela nossa API. Esse método é responsável pela abertura do Huggy Chat no momento em que o usuário clicar no novo botão:


4. Adicionando comportamentos aos botões do Huggy Chat

Nesta etapa, apresentaremos a implementação do código JavaScript. O primeiro passo é efetuar a declaração de duas variáveis.

A primeira variável, que chamaremos de widthScreenDefault, é responsável por definir a largura mínima de tela exigida para a exibição do botão padrão. Neste exemplo, adotamos o valor de 768px. Telas menores exibirão o novo botão.

A segunda variável, que chamaremos de chatBoxOpened, atualiza o seu status de acordo com o estado do Huggy Chat (aberto ou fechado). Se o Huggy Chat estiver aberto, ela recebe o valor true, e quando fechado, false.

Precisaremos, mais à frente, capturar a largura da tela do usuário para indicar ao sistema qual botão seria mais adequado de exibir em um determinado momento. Para executar essa ação, criaremos uma função chamada screenWidthVerify, que utiliza a propriedade Window.innerWidth:


Para mostrar ou esconder o botão padrão do Huggy Chat, criaremos uma função chamada howHideDefaultButton(status). Essa função utiliza o parâmetro status e realiza uma chamada para o método Huggy.showButton ou Huggy.hideButton, ambos disponíveis na API Huggy Chat:


De modo semelhante, a função showHideAlternativeButton(status) é responsável por mostrar ou esconder o novo botão:

Neste exemplo, caso a tela tenha menos de 768px de largura, devemos esconder o botão padrão e mostrar a versão compacta dele. Faremos isso por meio das funções startDefaultButton e startAlternativeButton. A função startButtons, por sua vez, realiza a chamada para essas duas funções:


Para tornar a experiência ainda mais responsiva, personalizaremos o botão sempre que a tela for redimensionada.

Para isso, utilizaremos o evento window.onresize. Também utilizaremos a variável booleana chatBoxOpened para chamar esta função apenas quando o Huggy Chat estiver fechado:


Agora que já temos todas as funções necessárias implementadas, utilizaremos o evento callback afterLoad. Deste modo, sempre que o Huggy Chat for carregado, realizaremos uma chamada para a função startButtons.

Utilizaremos também o método Huggy.subscribe para executar uma ação sempre que o Huggy Chat for fechado ('box-closed'). Quando isso ocorrer, atualizamos a variável chatBoxOpened e chamamos novamente a função startButtons.

Para atualizar a variável chatBoxOpened quando o Huggy Chat for aberto, utilizaremos o tópico ('box-opened'):


O resultado final

Pronto! Finalizamos todas as configurações necessárias para tornar o botão do Huggy Chat responsivo, adaptando-o a diferentes contextos de navegação na web.

O resultado você confere logo abaixo:

Este artigo apresentou algumas maneiras de tornar o botão do seu Huggy Chat responsivo, ressaltando a importância  de oferecer páginas e recursos bem adaptados aos diferentes dispositivos disponíveis no mercado.

Aproveite também para conhecer outros recursos poderosos que disponibilizamos na nossa API, desenvolvidos com o objetivo de levar a melhor qualidade para o seu Atendimento Digital.

Clique aqui para acessar a documentação da API do Huggy Chat.
You've successfully subscribed to Huggy Blog
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Success! Your account is fully activated, you now have access to all content.