Como personalizar o widget com JavaScript
Use parâmetros JavaScript para controlar como o widget de chat ao vivo é exibido e como ele se comporta no seu site, incluindo estilo visual, posição, tamanho e idioma do sistema.
Por exemplo, você pode adaptar o widget às cores da sua marca, ajustar a distância em relação às bordas da tela ou incorporá-lo a um elemento específico da página.
Veja como configurar os parâmetros JavaScript e ativar o modo incorporado.
Personalizar o widget
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:
|
custom_img_button{} |
Define um ícone personalizado para o botão do chat com efeito de hover.
Especifique os seguintes parâmetros:
|
height |
Altura do widget, de 480 a 720 pixels. |
language |
O idioma do elementos de sistema do widget. Os seguintes valores são suportados:
|
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>
Incorporar o widget
O modo incorporado insere o widget dentro de um elemento específico da página, fazendo com que ele passe a fazer parte do layout. Por exemplo, você pode incorporar o widget em uma página dedicada de suporte.
Para ativar o modo incorporado, adicione o atributo data-is-embedded="true" ao script do widget:
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
async>
</script>No modo incorporado, o widget ocupa toda a largura e altura do elemento da página onde a tag <script> é inserida.
Se precisar de mais controle sobre o posicionamento, defina um elemento de destino e incorpore o widget dentro dele.
Adicione o atributo data-embedding-target e informe um seletor CSS. Certifique-se de que o seletor corresponda a um elemento existente na página:
<div id="chat"></div>
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
data-embedding-target="#chat"
async>
</script>Defina o tamanho do contêiner de destino no seu CSS para que o widget se adeque ao seu layout. Por exemplo, defina a largura e altura do #chat:
<style>
#chat {
width: 100%;
height: 600px;
}
</style>Última Atualização: 03.02.2026
ou