SDK oficial

O @vyntrica/widget é o SDK oficial pra embutir o widget via npm install + import, em vez de colar <script> manual no HTML. Útil sobretudo pra quem usa React, Vue ou Next e não quer editar index.html diretamente.

Por baixo do capô o SDK só monta e injeta a mesma tag <script data-api-key="..."> que já funciona no embed manual — ele não reimplementa o widget.

Instalação

npm install @vyntrica/widget

Uso

import { init } from '@vyntrica/widget'

init({
  apiKey: 'sua-api-key', // obrigatório — Dashboard > Widget > API Key
  title: 'Atendimento',
  subtitle: 'Online agora',
  welcome: 'Olá! Como posso te ajudar hoje?',
  color: '#4F46E5',
  position: 'bottom-right', // bottom-right | bottom-left | top-right | top-left
  logo: 'https://.../logo.png',
})

Em React, chame dentro de um useEffect com array de dependências vazio, pra rodar só uma vez quando o componente monta, e desfaça no cleanup com destroy() — importante em StrictMode (que monta/desmonta em dev) e em SPAs que trocam de rota:

useEffect(() => {
  init({ apiKey: 'sua-api-key' })
  return () => destroy()
}, [])

O pacote é escrito em TypeScript e já vem com os tipos inclusos (VyntricaConfig, VyntricaPosition) — sem precisar instalar @types/ separado.

Opções

Campo	Obrigatório	Descrição
`apiKey`	sim	API Key da empresa
`title`	não	Título do header do chat
`subtitle`	não	Subtítulo do header do chat
`welcome`	não	Primeira mensagem mostrada ao abrir
`color`	não	Cor principal (hex)
`position`	não	`bottom-right` (padrão) \| `bottom-left` \| `top-right` \| `top-left`
`logo`	não	URL de imagem pro avatar do widget
`proactive`	não	`true` pra abrir sozinho depois de `proactiveDelay`
`proactiveDelay`	não	Segundos de espera antes de abrir sozinho (padrão: 10)
`apiUrl`	não	Override da URL do backend (padrão: produção)
`scriptUrl`	não	Override da URL do `chat.js` (padrão: CDN oficial)

API

init(config) — injeta o widget. Idempotente: se já existe um widget na página, não faz nada.
destroy() — remove o widget injetado e libera init() pra rodar de novo.
isInjected() — retorna true se o widget já está na página.

Limitações conhecidas

O chat.js não suporta reconfiguração em tempo real — pra trocar cor, posição etc. de um widget já injetado, é preciso destroy() + init() de novo (que recarrega o script), não dá pra só atualizar a configuração do widget já montado.