Guia rápido

Widget de Conversa Valz

Cole a linha abaixo no seu HTML, publique e pronto. O widget aparece no canto da página, sem bloquear o carregamento, pronto para falar com seus clientes.

⚡
Em produção em 1 passo Inclua o script e publique.
⏱️
Carregamento defer · 100% async Não bloqueia o render da página.
📱
Desktop e Mobile responsivo O chat ajusta layout em qualquer tela.
Copie a linha e publique
Leva menos de 30 segundos.
🚀
Veja o preview ao lado
Experimente a interação do chat.
👀
Widget no canto da tela
Posicionamento automático e responsivo.
Visual no mobile/desk
Oi! Sou a Valz, pronta para ajudar hoje.
Qual horário de atendimento?
Estamos online 24/7 direto pelo widget. 🚀
Perfeito, obrigado!
Enviar mensagem

O widget se posiciona no canto da tela em desktop e mobile, sempre com carregamento defer.

  • 1
    Copie e cole a linha abaixo
    <script src="https://chatwidget.valzdigital.com/widget.js" defer></script>

    Coloque no <head> ou antes de </body>.

    Importante: garanta que seu HTML tenha <meta charset="UTF-8" /> no <head> para evitar caracteres quebrados.

  • 2
    Publique normalmente

    O atributo defer deixa o carregamento do widget fora do caminho crítico da página.

  • 3
    Veja funcionando

    Abra seu site. O ícone do chat deve aparecer no canto inferior direito pronto para uso.

Configurações opcionais

Se quiser personalizar (cores, mensagem inicial, rótulos, API, ícone), defina o objeto window.VALZ_WIDGET_CONFIG antes da linha do script. Exemplo:

<script>
 window.VALZ_WIDGET_CONFIG = {
  WIDGET_TITLE: "Assistente Valz",
  WIDGET_SUBTITLE: "Suporte em tempo real",
  LAUNCHER_EMOJI: "💎",
  WELCOME_MESSAGE: "Oi! Como posso ajudar hoje?",
  INPUT_PLACEHOLDER: "Escreva aqui...",
  SEND_LABEL: "Enviar",
  THEME: {
   primary: "#22c55e",
   primaryStrong: "#16a34a",
   primarySoft: "rgba(34, 197, 94, 0.6)",
   surface: "#0b1220",
   surface2: "#050a14",
   text: "#e8edf5",
   textContrast: "#0b1220",
   border: "rgba(255,255,255,0.12)",
   borderStrong: "rgba(34, 197, 94, 0.5)",
   muted: "#9fb0c9",
   shadow: "rgba(0,0,0,0.48)",
   success: "#22c55e",
   successGlow: "rgba(34, 197, 94, 0.2)",
   avatarLight: "#6ee7b7",
   avatarDark: "#15803d",
   highlight: "rgba(129,140,248,0.7)"
  }
 };
</script>
<script src="https://chatwidget.valzdigital.com/widget.js" defer></script>

Todos os campos são opcionais. Se não definir nada, os padrões já embarcados entram em ação. O que cada chave faz:
WIDGET_TITLE: título no topo da janela.
WIDGET_SUBTITLE: linha abaixo do título.
LAUNCHER_EMOJI: ícone do botão que abre o chat.
WELCOME_MESSAGE: primeira mensagem enviada pela IA.
INPUT_PLACEHOLDER: texto dentro do campo de digitação.
SEND_LABEL: texto do botão de envio.

Guia rápido de cores (THEME):
primary / primaryStrong / primarySoft: botão e bolhas do usuário (normal/hover/fundo suave).
surface / surface2: fundos da janela do chat (principal/secundário).
text / textContrast: textos claros e textos em áreas claras.
border / borderStrong: contornos discretos e contornos de destaque.
muted: textos auxiliares e dicas.
shadow: sombra e profundidade da janela.
success / successGlow: indicador online (ponto verde e brilho).
avatarLight / avatarDark: gradiente do avatar do bot.
highlight: borda de destaque usada em mensagens do bot.