O chat do Data Lead é renderizado dentro de um Shadow DOM. Isso significa que o CSS do seu site não vaza para dentro do chat, e o CSS do chat não vaza para o seu site. É a razão de o widget não precisar de iframe para não quebrar o seu layout.
O que o widget insere na sua página
| Elemento | Onde | Para quê |
|---|---|---|
<div id="datastone-lead"> com um shadow root aberto |
Final do <body> |
Hospeda o launcher, o painel do chat e a faixa de consentimento |
<script data-datastone="widget"> e <script data-datastone="behavior"> |
<head> |
O chat e o coletor de páginas |
<style> dentro do shadow root |
— | Todo o CSS do chat |
<div data-datastone="turnstile-holder"> e um <style> no <head> |
<body> / <head> |
Caixa do desafio anti-bot, só quando ele está habilitado |
O contêiner do desafio anti-bot fica fora do Shadow DOM de propósito: é um script de terceiro e não precisa atravessar a fronteira do widget. Enquanto está vazio — o caso normal — ele não recebe clique nenhum.
Isolamento: o que isso garante e o que não garante
Garante: nenhuma regra do seu CSS (nem um * { font-family: … }, nem um reset agressivo)
altera o chat. A raiz do shadow começa com all: initial, então o chat parte de um estado
neutro e define tudo o que usa.
Não garante: posição e empilhamento. O host é um elemento comum do seu <body>, então ele
participa do contexto de empilhamento da página. Na prática:
- o launcher e a faixa usam
z-index: 2147483000, o painel2147483001e a caixa do desafio2147483004; - se algum elemento do seu site usar um
z-indexmaior (ou criar um contexto de empilhamento que contenha o chat), ele pode cobrir o widget; - um
body { overflow: hidden }aplicado por um modal do seu site pode afetar a rolagem enquanto o modal estiver aberto.
Se o chat aparecer atrás de algo, procure no seu CSS por z-index acima de 2 bilhões, por
transform/filter/will-change em ancestrais do <body> e por barras fixas de cookies.
Geometria padrão
| Elemento | Tamanho e posição |
|---|---|
| Launcher | Círculo de 56 px, a 20 px do rodapé e da lateral escolhida |
| Painel (desktop) | 380 px de largura, 560 px de altura, ancorado 88 px acima do rodapé; nunca ultrapassa a janela |
| Painel (até 640 px de largura) | Ocupa a largura toda e 92% da altura, encostado no rodapé, respeitando a área segura do aparelho |
| Faixa de consentimento | Ao lado do launcher, como região da página — não é modal e não prende o foco |
O lado (direita ou esquerda) é uma configuração da conta, não do seu CSS.
O que é personalizável — e o que não é
A personalização fica em Personalização, no menu lateral do painel, e trabalha com tokens validados, nunca com CSS livre:
- cor primária e cor do balão do visitante, em hexadecimal
#RRGGBB; - raio de canto, de 0 a 24 px;
- nome do agente;
- posição (direita ou esquerda);
- avatar do agente (imagem enviada pelo formulário, com limite de tamanho e tipo);
- remover a marca do widget, quando o seu plano inclui.
A fonte é a do sistema, para o chat não baixar arquivo nenhum e não depender do font-src da
sua política. Não há campo de CSS personalizado, e não há como injetar estilos no shadow root
de fora: qualquer folha de estilo sua é, por construção, ignorada pelo chat.
A prévia ao lado do formulário é o widget real, montado em modo demonstração: trocar cor e nome ali não gasta IA nem grava conversa nenhuma.
Acessibilidade e contraste
O chat mantém alvos de toque de pelo menos 44 px nos controles principais, anel de foco visível
em duas cores (para contrastar tanto em fundo claro quanto escuro) e respeita
prefers-reduced-motion na animação de "digitando". Como você escolhe as cores, vale conferir
o contraste do texto sobre a cor primária ao trocar a paleta.
Inspecionando o chat
No DevTools, procure por #datastone-lead no final do <body> e expanda o #shadow-root (open). O shadow root é aberto, então o inspetor mostra a árvore inteira e você consegue
testar mudanças de estilo ali mesmo — lembrando que elas não sobrevivem ao recarregamento, já
que o CSS é gerado a partir dos tokens da conta.
Para checar rapidamente pela console se o widget montou:
document.getElementById("datastone-lead")?.shadowRoot?.querySelector(".launcher");
Se isso devolver null, o chat ainda não montou — veja
Solução de problemas.
Veja também
Precisa de ajuda?
Fale com o suporte da Data Stone pelo canal combinado com a sua conta. Um print da página com o chat sobreposto e o seletor CSS do elemento que o cobre resolvem a maioria dos casos.