Skip to main content

🚀 Guia de Instalação - Vya Widget

Bem-vindo ao guia de instalação do Vya Widget! Este documento irá orientá-lo em todos os passos necessários para ativar e configurar o widget de chat inteligente em seu site.

📋 Pré-requisitos

Antes de começar, certifique-se de que você tem:

  • Acesso ao código HTML do seu site ou landing page
  • Conta ativa no RD Station (caso deseje integração com CRM)
  • Permissões de administrador no RD Station

🔧 Passo 1: Integração com RD Station (Opcional)

Se você deseja que os leads capturados pelo widget sejam enviados automaticamente para o RD Station, siga estas etapas:

1.1. Gerar Token de Acesso

Para conectar o widget ao seu CRM RD Station, você precisa gerar um token de acesso:

  1. Acesse sua conta do RD Station
  2. Siga as instruções detalhadas neste link oficial do RD Station:
    👉 Como Gerar e Visualizar Token no RD Station

1.2. Enviar Token para a Vya.Digital

Após gerar o token:

  • ✉️ Envie o token gerado para o time da Vya.Digital
  • Aguarde a confirmação de que a integração foi configurada
  • A Vya.Digital irá configurar a integração de forma segura

⚠️ Importante: Nunca compartilhe seu token publicamente. Envie apenas através dos canais oficiais da Vya.Digital.

📦 Passo 2: Instalação do Widget no Site

2.1. Copiar o Código de Instalação

Copie o código abaixo e personalize conforme suas necessidades:

<!-- SDK Installation Snippet -->
<script>
  (function (d, t) {
    var g = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src = "https://vya.digital/chat/apollo/widget.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);
    g.onload = function () {
      window.VyaWidget.init({
        client: "seu-cliente-aqui",
        firstMessage:
          "Olá! ✨ Como posso ajudá-lo hoje?",
        agentName: "Assistente",
        primaryColor: "#ff9f43",
        avatarUrl:
          "https://ui-avatars.com/api/?name=Assistente&background=ff9f43&color=fff",
      });
    };
  })(document, "script");
</script>

2.2. Personalizar as Configurações

Ajuste os seguintes parâmetros conforme sua necessidade:

Parâmetro Descrição Exemplo
client Identificador único do seu negócio "arquidecore"
firstMessage Mensagem inicial do assistente "Olá! ✨ Sou Aura, como posso ajudar?"
agentName Nome do assistente virtual "Aura", "Assistente", "Suporte"
primaryColor Cor principal do widget (formato hexadecimal) "#ff9f43", "#0066cc"
avatarUrl URL da imagem do avatar (opcional) Link para imagem ou gerador de avatares

Exemplo de Avatar Personalizado

avatarUrl: "https://seusite.com.br/imagens/avatar.png"

Se preferir usar um avatar gerado automaticamente:

avatarUrl: "https://ui-avatars.com/api/?name=Seu+Nome&background=ff9f43&color=fff"

2.3. Adicionar o Código ao Seu Site

  1. Localize o arquivo HTML do seu site ou landing page
  2. Cole o código logo antes da tag de fechamento </body>
  3. Salve o arquivo e faça upload para seu servidor (se necessário)

Exemplo de posicionamento

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <title>Meu Site</title>
</head>
<body>
  <!-- Conteúdo do seu site -->
  <h1>Bem-vindo ao meu site</h1>
  
  <!-- Cole o código do widget aqui, antes do </body> -->
  <script>
    (function (d, t) {
      var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
      g.src = "https://vya.digital/chat/apollo/widget.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.VyaWidget.init({
          client: "seu-cliente-aqui",
          firstMessage: "Olá! Como posso ajudar?",
          agentName: "Assistente",
          primaryColor: "#ff9f43",
          avatarUrl: "https://ui-avatars.com/api/?name=Assistente&background=ff9f43&color=fff",
        });
      };
    })(document, "script");
  </script>
</body>
</html>

✅ Passo 3: Testar a Instalação

Após adicionar o código:

  1. 🌐 Acesse seu site em um navegador
  2. 👀 Verifique se o widget aparece no canto inferior direito
  3. 💬 Clique no widget para abrir o chat
  4. ✍️ Envie uma mensagem teste para confirmar que está funcionando

🎨 Personalização Avançada

Cores Personalizadas

Para alterar as cores do widget e combiná-las com a identidade visual da sua marca:

primaryColor: "#0066cc"  // Azul
primaryColor: "#28a745"  // Verde
primaryColor: "#dc3545"  // Vermelho
primaryColor: "#6f42c1"  // Roxo

Mensagens Contextualizadas

Personalize a mensagem inicial de acordo com seu segmento:

Exemplo - Loja de Móveis:

firstMessage: "Olá! ✨ Sou Aura, sua consultora virtual de móveis planejados. Qual o seu projeto dos sonhos ou ambiente de interesse?"

Exemplo - Consultoria:

firstMessage: "Olá! 👋 Sou o Assistente Virtual. Como posso ajudá-lo com suas dúvidas sobre nossos serviços?"

Exemplo - E-commerce:

firstMessage: "Bem-vindo! 🛍️ Estou aqui para ajudar você a encontrar o produto perfeito. O que você procura?"

🔍 Solução de Problemas

O widget não aparece no site

  • ✔️ Verifique se o código foi colado corretamente antes da tag </body>
  • ✔️ Confirme se não há erros no console do navegador (F12)
  • ✔️ Certifique-se de que o arquivo foi salvo e enviado ao servidor
  • ✔️ Limpe o cache do navegador (Ctrl + Shift + R)

O widget aparece mas não responde

  • ✔️ Verifique se o parâmetro client está correto
  • ✔️ Confirme sua conexão com a internet
  • ✔️ Entre em contato com o suporte da Vya.Digital

Problemas com integração do RD Station

  • ✔️ Verifique se o token foi enviado corretamente
  • ✔️ Confirme se o token ainda está válido no RD Station
  • ✔️ Aguarde confirmação da Vya.Digital sobre a configuração

📞 Suporte

Precisa de ajuda? Entre em contato:

📚 Recursos Adicionais

Última atualização: Janeiro de 2026
Versão: 1.0

✨ Obrigado por escolher a Vya.Digital! ✨

Back to top