Ensinaremos você a melhorar a experiência de navegação em seu site, adaptando o layout do botão do Huggy Chat para diferentes tamanhos de tela.

As pessoas esperam que o seu site ofereça uma boa experiência de comunicação. Porém, nos dias atuais, já não é mais possível prever se elas utilizam um computador, smartphone ou até uma Smart TV.

Com essa variedade de dispositivos capazes de acessar a internet, sua empresa deve estar atenta ao modo como o seu site se apresenta em diferentes tamanhos de tela.

Uma solução para este caso é oferecida pelo Design Responsivo, uma abordagem que se preocupa com a disposição dos elementos do seu site em telas com dimensões distintas, entregando sempre uma experiência de leitura e navegação agradável.

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 no seu site.

Por isso, vamos mostrar a você na prática como tornar o botão do Huggy Chat responsivo. Para facilitar o seu aprendizado, estruturamos esse tutorial da seguinte forma:

• O que queremos alcançar;

• O passo a passo da configuração;

  • Definindo a aparência do botão padrão;

  • Definindo as dimensões da versão compacta do botão;

  • Iniciando o Huggy Chat ao clicar na versão compacta do botão;

  • Adicionando responsividade aos botões.

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.

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 será este aqui:

Para efetuar essa configuração, utilizaremos os seguintes recursos da API 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, siga este passo a passo. 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 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 px.

Para conhecer mais detalhes sobre essa recomendação da W3C, clique aqui.

Levaremos em consideração a recomendação da W3C para desenvolver a 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:

#button-chat {
      display: none;
  }
.img-position {
      position: fixed;
      bottom: 20px;
      right: 24px;
  }
.img-dimensions {
      width: 44px;
  }

3. Iniciando o Huggy Chat ao clicar na versão compacta do botão

No código HTML do botão, adicionamos o evento onclick atribuindo a ele o método Huggy.openBox. Isso fará a janela do Huggy Chat abrir no momento em que o usuário clicar no botão.

    <div id="button-chat" class="img-position" onclick="Huggy.openBox()">
        <img class="img-dimensions" src="https://cdn.glitch.com/bdad1b11-3090-4b96-b339-71e6fe1bb1b8%2Fhuggy-chat.png?v=1626176725499">
    </div>

4. Adicionando responsividade aos botões

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 a versão compacta do botão.

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

var widthScreenDefault = 768;
var chatBoxOpened = false;

Precisaremos, mais à frente, capturar a largura da tela do usuário. Para executar essa ação, criaremos uma função chamada screenWidthVerify, que utiliza a propriedade Window.innerWidth.

function screenWidthVerify() {
    var screenWidth = window.innerWidth;
    return screenWidth;
}

Para mostrar ou ocultar 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 do Huggy Chat.

function showHideDefaultButton(status) {
    if (status === 'show') {
        Huggy.showButton();
    }
    if (status === 'hide') {
        Huggy.hideButton();
    }
}

De modo semelhante, a função showHideAlternativeButton(status) é responsável por mostrar ou ocultar a versão compacta do botão.

function showHideAlternativeButton(status) { 
    var chat = document.getElementById('button-chat');

    if (status === 'show') {
        chat.style.display = 'block';
    }
     if (status === 'hide') {
        chat.style.display = 'none';
    }
}

Neste exemplo, caso a tela tenha menos de 768px de largura, devemos ocultar 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.

function startButtons() {
    startDefaultButton();
    startAlternativeButton();
}

function startDefaultButton() { 
    screenWidthVerify() < widthScreenDefault ? showHideDefaultButton('hide') : showHideDefaultButton('show');
}

function startAlternativeButton() { 
    screenWidthVerify() < widthScreenDefault ? showHideAlternativeButton('show') :showHideAlternativeButton('hide');
}

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

Neste caso, utilizaremos o evento window.onresize. Ele será chamado apenas quando o Huggy Chat estiver fechado, o que verificaremos por meio da variável booleana chatBoxOpened.

window.onresize = function () {
    if (chatBoxOpened === false) {
        if (screenWidthVerify() < widthScreenDefault) {
            showHideDefaultButton('hide');
            showHideAlternativeButton('show');
        }
        else {
            showHideDefaultButton('show');
            showHideAlternativeButton('hide');
        }
    }
}

Agora que já temos todas as funções necessárias, 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 a janela do Huggy Chat for fechada ('box-closed'). Quando isso ocorrer, atualizamos a variável chatBoxOpened e chamamos novamente a função startButtons.
Para atualizar a variável chatBoxOpened quando a janela do Huggy Chat for aberta, utilizaremos o evento ('box-opened').

 // As informações ocultadas neste código podem ser encontradas na tela de configuração do Huggy Chat.
var $_Huggy = {
    defaultCountry: '+55',
    uuid: '---', // este campo foi ocultado por conter informação sigilosa.
    company: '---', // este campo foi ocultado por conter informação sigilosa.
    afterLoad: function () {
        startButtons();
        Huggy.subscribe('box-closed', function () {
            chatBoxOpened = false;
            startButtons();
        })
        Huggy.subscribe('box-opened', function () {
            chatBoxOpened = true;
        })
    }
};
(function (i, s, o, g, r, a, m) {
    i[r] = { context: { id: '---' } }; // este campo foi ocultado por conter informação sigilosa.
    a = o; o = s.createElement(o); o.async = 1;
    o.src = g; m = s.getElementsByTagName(a)[0];
    m.parentNode.insertBefore(o, m);
})(window, document, 'script', 'https://js.huggy.chat/widget.min.js', 'pwz');

Pronto! Agora você pode contar com uma versão responsiva do botão do Huggy Chat, adaptável a diferentes contextos de navegação no seu site.

E esse é só um exemplo de todo o potencial que a nossa API oferece.

Quer conhecer um pouco mais sobre ela?

Aproveite para explorar outros recursos desenvolvidos com o objetivo de levar a melhor qualidade para o seu Atendimento Digital.