Configurações avançadas

Para seguir com esta leitura, é recomendável uma noção mínima de HTML e CSS.

Nesta página apresentamos dicas de personalização de cores e ícones do WebChat. Todas as alteracões desse tipo são utilizam CSS e, por isso, devem ser feitas no site que está recebendo o WebChat. Abaixo temos as classes de CSS que podemos alterar para deixar o WebChat com a cara de sua empresa:

/* Botão flutuante do chat
 * - Esta classe é geral e alterando algo aqui afeta tanto a visão aberta
 *   como a visão fechada do chat
 * - Os valores abaixo retratados representam os valores padrão
 */
.__talkjs_launcher {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 1000;
    background-color: #0785f2;
    background-position: center 17px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 19px 1px rgb(0 0 0 / 10%);
}

/* Botão flutuante do chat aberto
 * - Esta classe altera apenas a visão aberta do chat
 * - Os valores abaixo retratados representam oos valores padrão
 */
.__talkjs_launcher.open {
    background-size: 18px;
    background-position: center 21px;
    background-image: url(/__assets/52ecaa1….svg); /* Ícone de fechar (X) */
}

/* Botão flutuante do chat fechado
 * - Esta classe altera apenas a visão fechada do chat
 * - Os valores abaixo retratados representam oos valores padrão
 */
.__talkjs_launcher.closed {
    background-image: url(/__assets/dbdab1f….svg); /* Ícone de balão de mensagem */
}

Para alterar qualquer propriedade das listadas acima, devemos inserir uma tag <style> logo abaixo do fechamento da tag </script> onde foi inserido o código do WebChat ou, em caso de WordPress, no local mais adequado a depender do seu tema (certifique-se de que ele seja aplicado ao menos em todas as páginas que utilizem o WebChat).

Lembre-se de sempre utilizar o !important ao setar um valor diferente do padrão em qualquer uma das classes do WebChat. Isso garante que suas customizacões serão sempre aplicadas.

Abaixo temos alguns exemplos de customizacões.

Mudança de ícone e cor do botão

Lembre-se de mudar a url e a cor para os valores os quais deseja alterar.

<style>
    /* Altera o ícone do WebChat quando fechado */
    .__talkjs_launcher.closed {
        background-image: url('...') !important; /* Lembre-se de mudar a url */
    }

    /* Altera a cor do botão flutuante do WebChat */
    .__talkjs_launcher {
        background-color: red !important; /* Lembre-se de mudar a cor */
        background-position: center !important; /* Deixa novo ícone centralizado */
    }
</style>