Widget Embarcável
O Widget Embarcável permite integrar o atendimento por vídeo do Voki diretamente no seu site ou aplicação web. Seus clientes podem iniciar uma videochamada sem sair da página, com uma experiência fluida e integrada à identidade visual da sua empresa.
Disponibilidade
O widget embarcável está disponível em todos os planos, incluindo o plano Gratuito.
Como integrar ao seu site
Para adicionar o widget, basta incluir o seguinte trecho de código HTML antes do fechamento da tag </body> no seu site:
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'seu-departamento-slug',
theme: {
primaryColor: '#4F46E5',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>Slug do departamento
O valor do campo department deve ser o slug do departamento para onde as chamadas serão direcionadas. Você encontra o slug na página de configuração do departamento no Painel do Gestor (ex: "vendas", "suporte-tecnico", "atendimento").
Parâmetros de configuração
| Parâmetro | Tipo | Obrigatório | Descrição |
|---|---|---|---|
department | string | Sim | Slug do departamento de destino das chamadas |
apiBaseUrl | string | Sim | URL base da API do Voki |
theme.primaryColor | string | Não | Cor primária do widget em formato hexadecimal. Padrão: #4F46E5 |
theme.position | string | Não | Posição do botão flutuante: bottom-right ou bottom-left. Padrão: bottom-right |
Personalização de tema
Personalize a aparência do widget para que ele combine com a identidade visual do seu site. Basta ajustar os parâmetros do objeto theme:
Voki.init({
department: 'vendas',
theme: {
primaryColor: '#1E40AF', // Cor dos botões e destaques
position: 'bottom-left', // Posição do botão flutuante
},
apiBaseUrl: 'https://voki.avanter.com.br'
});Escolhendo a cor
Use uma cor que contraste bem com o fundo do seu site para garantir que o botão do widget seja facilmente visível pelos visitantes. Cores escuras sobre fundos claros (e vice-versa) funcionam melhor.
Fluxo de atendimento pelo widget
O widget conduz o cliente por um fluxo completo de atendimento sem sair do seu site:
| Etapa | O que acontece |
|---|---|
| 1. Botão flutuante | Um botão de vídeo aparece no canto configurado da página do seu site |
| 2. Formulário | Ao clicar, o cliente preenche nome, e-mail e motivo do contato |
| 3. Sala de espera | O cliente aguarda na fila do departamento configurado, visualizando sua posição |
| 4. Videochamada | Quando atendido, a videochamada abre em uma janela embarcada no widget |
| 5. Avaliação | Após a chamada, a pesquisa de satisfação (NPS/CSAT) é exibida dentro do widget |
Responsividade
O widget é totalmente responsivo e funciona em dispositivos móveis e desktop. Em telas menores, ele se adapta automaticamente para ocupar o espaço disponível.
Exemplo prático de integração
Abaixo, um exemplo completo de página HTML com o widget do Voki integrado:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Site — Atendimento por Vídeo</title>
</head>
<body>
<h1>Bem-vindo ao nosso site!</h1>
<p>Precisa de ajuda? Clique no botão de vídeo no canto da tela.</p>
<!-- Widget do Voki -->
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'atendimento',
theme: {
primaryColor: '#0D47A1',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>
</body>
</html>Boas práticas
Recomendações para uma boa experiência
- Escolha o departamento correto — Direcione as chamadas do widget para um departamento que tenha atendentes disponíveis durante o horário comercial
- Informe o horário de atendimento — Adicione ao seu site um texto indicando quando os atendentes estão disponíveis para evitar frustração dos clientes
- Teste antes de publicar — Após integrar o código, faça um teste completo do fluxo (clique no botão, preencha o formulário, entre na fila) para garantir que tudo funcione corretamente
- Uma única instância — Inclua o código do widget apenas uma vez por página para evitar comportamentos inesperados
Dúvidas frequentes sobre o widget
O widget funciona em sites construídos com WordPress, Wix ou Shopify? Sim. Como o widget é carregado via JavaScript puro, ele funciona em qualquer plataforma que permita inserir código HTML personalizado.
Posso ter widgets em diferentes páginas apontando para departamentos diferentes? Sim. Basta alterar o valor do parâmetro department em cada página para direcionar as chamadas ao departamento desejado.
O widget afeta a performance do meu site? O impacto é mínimo. O script do widget é leve e carregado de forma assíncrona, sem bloquear o carregamento da página.