Passar para o conteúdo principal

Avançado: posicione a caixa de chat usando a API JavaScript

Defina onde a caixa de chat aparece via código, podendo escolher posições diferentes para desktop e celular.

Escrito por Michal Jindra

Se você é desenvolvedor, pode escolher exatamente onde a caixa de chat vai aparecer adicionando opções de configuração no script de instalação do Smartsupp. Veja neste guia como colocar a caixa de chat no lado esquerdo, afastar da posição padrão e usar outra posição só no celular.

Avançado: ajuste no código de instalação

🟡 Observação: Você vai precisar de acesso de desenvolvedor ao código do seu site. Para mover a caixa de chat para o lado esquerdo, é preciso ter o plano Solo ou superior.

Adicione as opções na parte de configuração do seu código de instalação: coloque logo depois da linha com _smartsupp.key e antes do loader (a parte que começa com window.smartsupp||). A caixa de chat lê essas configurações quando carrega, então garanta que estejam lá antes do loader rodar.

Colocar a caixa de chat no lado esquerdo:

<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';_smartsupp.orientation = "left";// ...restante do seu código de instalação (o loader)</script>

Afastar a caixa de chat da posição padrão (valores em pixels):

_smartsupp.offsetX = 20;  // afasta da borda lateral_smartsupp.offsetY = 100; // sobe em relação à borda inferior

Usar uma posição diferente só no celular:

<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';if (window.innerWidth < 768) {  _smartsupp.offsetY = 150;}// ...restante do seu código de instalação (o loader)</script>

Para colocar em prática:

  1. Abra o código do seu site e encontre o script de instalação do Smartsupp.

  2. Inclua as opções logo após a linha _smartsupp.key e antes do loader.

  3. Ajuste os valores conforme o layout do seu site.

  4. Salve as alterações e recarregue seu site em uma janela anônima ou privada para testar a nova posição. Não deixe de verificar também no celular.

💡 Dica: Comandos como smartsupp('chat:position', ...) não funcionam aqui. A caixa de chat ignora esses comandos e o console do navegador mostra "Unknown API command". Veja todas as opções de configuração na documentação para desenvolvedores.


E agora?

💡 Precisa de ajuda? Fale com a nossa equipe de suporte — estamos prontos para ajudar você!

Respondeu à sua pergunta?