Pré-requisitos
Certifique-se de ter criado um widget ViaSay na seção de integração
Acesse esta página para obter orientações.
Pré-requisitos técnicos
Acesso ao código-fonte HTML do seu site
Token do widget na aba Integração no painel do ViaSay
Conhecimentos básicos de HTML
Instalação
👍 Implante de forma invisível e lance quando estiver pronto
Defina a Distribuição do público como 0% durante a configuração. O código do widget será implantado em produção, mas permanecerá oculto. Quando estiver pronto para lançá-lo, ajuste a porcentagem em Integração para controlar a visibilidade — sem necessidade de alterações no código.
1. Copie o código do widget
Acesse Build > Integrate > Channels no painel do ViaSay. Copie o trecho de código de instalação fornecido.
2. Adicione o código ao seu site
Cole o código do widget no final da tag <body>, logo antes do fechamento </body> no seu modelo HTML.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- ViaSay Widget - Add before closing body tag -->
<script>
var widget = document.createElement("destygo-webchat");
widget.setAttribute('id', "destygo_widget");
widget.setAttribute('class', "destygo_widget");
widget.setAttribute('token', "YOUR_TOKEN_HERE");
document.body.appendChild(widget);
</script>
<script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>Por que no final do body? Colocar o código do widget antes de </body> garante que o conteúdo da página seja carregado primeiro, impedindo que o widget bloqueie a renderização crítica da página.
3. Implante as alterações
Salve o arquivo HTML e faça a implantação no seu servidor web. O widget será carregado automaticamente em todas as páginas que incluírem esse código.
Verificação
Confirme se o widget está ativo
Abra seu site em um navegador
Verifique o canto inferior direito para localizar o ícone de chat do ViaSay
Clique no ícone para abrir a interface de chat
Envie uma mensagem de teste
Padrões comuns de implementação
Aplicativos de página única (SPA)
Para aplicativos React, Vue ou Angular, adicione o trecho ao arquivo principal index.html no diretório público.
Sites baseados em modelos
Para WordPress, Shopify ou plataformas semelhantes, adicione o código ao arquivo de modelo do rodapé do seu tema para aplicá-lo a todas as páginas.
Geradores de sites estáticos
Para Next.js, Gatsby ou Hugo, adicione o trecho ao componente de layout ou ao modelo base.
Solução de problemas
Problema | Solução |
|---|---|
O widget não aparece | Verifique se o token no seu código corresponde ao da aba Integração |
O widget carrega lentamente | Mova o script para o final de |
Vários widgets aparecem | Certifique-se de que o trecho de código seja incluído apenas uma vez no seu modelo |
Erros de CORS no console | Verifique se o seu domínio está na lista de permissões nas configurações do painel do ViaSay |
⚠️ Não coloque o código do widget na seção <head>. Isso atrasa o carregamento da página e prejudica a experiência do usuário.
📌 Dicas de integração
Garanta a configuração adequada da lista de permissões da Política de Segurança de Conteúdo (CSP):
wss://_.mindsay.com
wss://*.laiye.com
Para a integração com o Zendesk ou outros serviços, consulte a documentação específica correspondente
Opções avançadas
Implantação específica por URL: Use o Google Tag Manager para controlar em quais páginas o widget será exibido e personalizar as regras de acionamento. [Consulte o guia de integração do GTM →]
Estilo personalizado: Modifique a aparência e a posição do widget na aba Formato e design do seu painel.
Vários ambientes: Gere tokens separados para os ambientes de homologação e produção nas configurações Avançadas.
Próximas etapas
Configure a aparência do widget em Formato e design
Configure saudações personalizadas em Saudações
Explore a integração com o GTM para segmentação avançada por URL