Instalação do widget

Existem duas formas de colocar o chat da Vyntrica no site da sua empresa: o snippet direto em HTML (chat.js) ou o SDK oficial pra projetos React, Vue ou JavaScript puro.

Opção 1 — snippet HTML

A forma mais rápida. Cole o trecho abaixo antes do fechamento da tag </body> do seu site:

<script
  src="https://widget.vyntrica.com/chat.js"
  data-api-key="SUA_CHAVE_DE_API"
  data-color="#8b5cf6"
  data-position="bottom-right"
  data-logo="https://seusite.com/logo.png"
  async
></script>

Atributos disponíveis

Atributo	Obrigatório	Descrição
`data-api-key`	Sim	Chave de API da sua empresa, gerada no painel Vyntrica.
`data-color`	Não	Cor principal do widget, em hexadecimal. Se omitido, usa a cor configurada no painel.
`data-position`	Não	Canto da tela onde o widget aparece: `bottom-right`, `bottom-left`, `top-right` ou `top-left`. Padrão: `bottom-right`.
`data-logo`	Não	URL de uma imagem de logo exibida no cabeçalho do widget.

O chat.js pesa poucos kilobytes e carrega de forma assíncrona, sem travar o carregamento do resto da página.

Opção 2 — SDK oficial (`@vyntrica/widget`)

Pra projetos com bundler (React, Vue, Next.js, Vite etc.), instale o pacote via npm:

npm install @vyntrica/widget

Uso em JavaScript puro

import { init } from '@vyntrica/widget'

init({
  apiKey: 'SUA_CHAVE_DE_API',
  color: '#8b5cf6',
  position: 'bottom-right',
  logo: 'https://seusite.com/logo.png',
})

Uso em React

import { useEffect } from 'react'
import { init } from '@vyntrica/widget'

function App() {
  useEffect(() => {
    init({
      apiKey: 'SUA_CHAVE_DE_API',
      color: '#8b5cf6',
      position: 'bottom-right',
    })
  }, [])

  return <div>{/* seu app */}</div>
}

Uso em Vue

import { onMounted } from 'vue'
import { init } from '@vyntrica/widget'

export default {
  setup() {
    onMounted(() => {
      init({
        apiKey: 'SUA_CHAVE_DE_API',
        color: '#8b5cf6',
        position: 'bottom-right',
      })
    })
  },
}

Onde encontrar sua chave de API

A chave de API é gerada automaticamente quando a empresa cria a conta e fica disponível no painel, na seção de configurações do widget.

Próximos passos

Personalização — cor, posição, logo e tom de voz configuráveis pelo painel.
FAQ — dúvidas comuns sobre instalação e funcionamento.