SDK & API JavaScript

Use o SDK JavaScript para controlar o widget programaticamente: abrir, fechar, definir usuário e registrar eventos.

Carregamento

Snippet do Widget v3.0.0

1<script>
2    window.WhatsAppWidgetSettings = {
3        position: "bottom-right", // ou "bottom-left"
4        theme: {
5            primaryColor: "#25D366",
6            secondaryColor: "#128C7E",
7            headerColor: "#075E54",
8            backgroundColor: "#E5DDD5",
9            textColor: "#111827",
10            bubbleColor: "#DCF8C6",
11            borderRadius: "16px",
12            fontFamily: "Inter, sans-serif"
13        }
14    };
15 
16    window.WhatsAppWidgetQ = window.WhatsAppWidgetQ || [];
17    window.WhatsAppWidgetQ.push(["init", {
18        token: "wgt_xxx",
19        baseUrl: "https://cloudwhats.app.br"
20    }]);
21 
22    (function(d, t) {
23        var g = d.createElement(t);
24        var s = d.getElementsByTagName(t)[0];
25        g.src = "https://cloudwhats.app.br/widget.js";
26        g.async = true;
27        s.parentNode.insertBefore(g, s);
28    })(document, "script");
29</script>

Carregue o script no final do body para reduzir impacto.

Personalização do Tema

Todas as propriedades de tema são opcionais. Valores não informados usam o padrão configurado no painel.

Propriedade	Padrão	Descrição
`primaryColor`	#25D366	Cor principal (botão, mensagens enviadas)
`secondaryColor`	#128C7E	Cor secundária (links, hover)
`headerColor`	#075E54	Cor de fundo do cabeçalho
`backgroundColor`	#E5DDD5	Cor de fundo da área de mensagens
`textColor`	#111827	Cor do texto geral
`bubbleColor`	#DCF8C6	Cor das bolhas de mensagem recebida
`borderRadius`	16px	Arredondamento da janela do chat
`fontFamily`	system-ui	Família tipográfica do widget

Prioridade de configuração

Configurações do painel têm prioridade base. Valores em WhatsAppWidgetSettings.theme sobrescrevem o painel.

Métodos principais

SDK

1window.WhatsAppWidget.open();
2window.WhatsAppWidget.close();
3window.WhatsAppWidget.toggle();
4window.WhatsAppWidget.setUser({ name: 'Maria', phone: '+55...' });
5window.WhatsAppWidget.setCustomAttributes({ plano: 'pro' });
6window.WhatsAppWidget.reset();

Disponibilidade

Os métodos ficam disponíveis após o evento widget:ready.

Eventos

1window.addEventListener('widget:ready', () => {
2  console.log('Widget pronto — v' + window.WhatsAppWidget.version);
3});
4window.addEventListener('widget:opened', () => {
5  console.log('Widget aberto');
6});
7window.addEventListener('widget:closed', () => {
8  console.log('Widget fechado');
9});
10window.addEventListener('widget:message', (event) => {
11  console.log('Nova mensagem', event.detail);
12});
13window.addEventListener('widget:error', (event) => {
14  console.error('Erro no widget', event.detail);
15});
16window.addEventListener('widget:reset', () => {
17  console.log('Widget resetado');
18});