Como personalizar o widget com JavaScript

Configure seu widget de chat online para combinar com o design do seu site e melhorar a experiência do usuário usando JavaScript.

No arquivo de configuração JavaScript, você pode definir os seguintes parâmetros opcionais:

primaryColor Define a cor principal do fundo, das mensagens e do cabeçalho do seu chat online por meio de um código hexadecimal.
colorScheme Define o modo do tema: claro, noturno, ou automático.
chatPosition{} Define a posição do seu chat online.

Especifique os seguintes parâmetros:

  • bottom – distância em relação à borda inferior;
  • right – distância em relação à borda direita.
custom_img_button{} Define um ícone personalizado para o botão do chat com efeito de hover.

Especifique os seguintes parâmetros:

  • url – link da imagem do ícone;
  • hover_url – link da imagem do ícone ao passar o mouse (efeito de hover).
height Altura do widget, de 480 a 720 pixels.
language O idioma do elementos de sistema do widget. Os seguintes valores são suportados:
  • en – Inglês,
  • uk – Ucrâniano,
  • ru – Rússo,
  • es – Espanhol,
  • pt – Português,
  • fr – Francês,
  • it – Italiano,
  • tr – Turco.

    Por padrão, o idioma do widget é determinado pelo idioma do navegador do visitante (se estiver na lista acima) ou definido para o Inglês.

Veja um exemplo de configuração personalizada para o chat online:

<script>
    document.addEventListener('spLiveChatLoaded', function() {
        window.sp.liveChat.config({
            primaryColor: '#48A0BD',
            colorScheme: 'auto',
            chatPosition: {
                bottom: '32px',
                right: '32px'
            },
            custom_img_button: {
                url: 'https://cdn.sendpulse.com/files/mp/5/e4b2d2664f05a7069ad2dedad9c590f6.jpg',
                hover_url: 'https://cdn.sendpulse.com/files/mp/5/610bdd6248d1304ddfbbda55794fcb86.png'
            },
            height: "600px",
            language: "pt"
        });
    });
</script>
Rate this article about "Como personalizar o widget com JavaScript"

User Rating: 5 / 5 (9)

Anterior

Como adicionar um widget de chat online a um site externo

Próximo

Como adicionar um menu de boas-vindas ao seu chat ao vivo

Popular em nosso blog

Comece a usar o chat ao vivo gratuito em seu site