Veja como oferecer uma experiência responsiva do Huggy Chat no seu site utilizando a nossa API
Você sabe quantos dispositivos digitais existem no Brasil? De acordo com pesquisa da FGV (Fundação Getúlio Vargas), só no Brasil são mais de 440 milhões de aparelhos em uso (computadores, notebooks, tablets e smartphones) em uso. Com toda essa variedade de dispositivos capazes de acessar a internet, a maneira como o site da sua empresa é exibido na tela de um celular, por exemplo, pode mudar drasticamente de uma tela para outra.
Nos dias atuais, é impossível prever se eles utilizam um computador, smartphone ou até uma Smart TV. Por isso, estar atento a essas questões responsivas é muito importante para o seu negócio, já que seus clientes e potenciais clientes buscam uma boa experiência de comunicação no seu site.
Uma solução para essa questão é o Design Responsivo. Essa técnica se preocupa com a criaçã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.
E como podemos ajudar nessa construção? 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.
A partir de agora vamos mostrar na prática como tornar o botão do Huggy Chat responsivo. E para que você entenda toda essa construção, o nosso conteúdo está estruturado da seguinte forma:
- O resultado que queremos alcançar;
- O passo a passo de como tornar o botão do Huggy Chat responsivo;
- O resultado final.
O que queremos alcançar
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. E 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.
Vamos levar em consideração a autoridade e 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.