Tutorial Completo

Primeiro, você precisa se inscrever para uma conta AI Anywhere.

1. Vá para a Página inicial do AI Anywhere
2. Clique no "Comece Agora" botão no cabeçalho
3. Inscreva-se usando sua conta social preferida (Google, GitHub, etc.)
4. You'll be automatically logged into your dashboard

Agora vamos criar um Helper que ajudará os usuários a escrever mensagens de formulário de contato.

1. Ir para o painel "Assistentes"
2. Dê ao seu Helper um nome descritivo, como "Exemplo de Formulário de Contato"
3. Selecione o grupo ao qual este assistente pertence
4. Clique no "Gerenciar Assistentes"

Configure seu assistente

Ao criar ou editar um Assistente, você configura:

• Resposta do Assistente: Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
• Palavras-chave e/ou Regras: Adicione palavras-chave ou regras que são importantes para o seu caso de uso (por exemplo, "contato", "consulta", "pergunta", "suporte").
• Configurações do Tema do Botão Personalize a aparência do botão de Ajuda (cor, texto) para combinar com o design do seu site.

Aprenda a encontrar seletores CSS para áreas de texto, formulários e campos de entrada para integrar assistentes AI Anywhere no seu site.

1. Nas configurações do seu Assistente, clique no "Gerar Trecho" botão
2. Você verá dois trechos de código:
   • Tag de script: Cole em seu site
   • Span âncora: Contém seu token do Helper
3. Copie ambos os trechos - você precisará deles na próxima etapa

Seu trecho de código consiste em duas partes:

<!-- Tag de script (vai em <head>) -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- Exemplo: Botão de Ajuda aparece próximo à sua área de texto -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Carregar o script do Assistente no seu

1. Abra o arquivo HTML do seu site (ou modelo) e localize o
2. Encontre o <head> seção
3. seção. Cole seu trecho de código logo antes do fechamento </head> da tag.

Veja como deve ser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Entre em Contato Conosco:</title>
  
  <!-- Incorporando o Script do Assistente -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

Procure o botão de Ajuda próximo às áreas de texto na sua página

1. Encontre seu formulário de contato (ou o formulário onde você deseja o Helper)
2. Localize a área de texto onde os usuários digitarão sua mensagem
3. Adicione o span âncora logo após a área de texto (ou em um local próximo)

Aqui está um exemplo completo mostrando ambas as partes:

<form id="contact-form">
  <div>
    <label for="name">Nome</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Sua Mensagem:</label>
    <textarea id="message" name="message" rows="6" required></textarea>
    <!-- O botão do Assistente aparecerá ao lado deste elemento. -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">Mensagem de Contato:</button>
</form>

Agora vamos verificar se tudo está funcionando corretamente.

1. Salvar Assistente
2. Abra o seu site\
3. Navegue até a página com seu formulário de contato
4. Procure o botão de Ajuda próximo às áreas de texto na sua página

O Que Armazenamos

• Exemplo: Botão de Ajuda aparece próximo à sua área de texto
• O botão tem o estilo correto (cor, texto, tamanho) que você configurou
• Quando você clica no botão, a interface do Helper é aberta
• Quando você digita texto e clica no botão do Helper, ele fornece sugestões

Solução de Problemas

O botão de Ajuda não\

• Check your browser's developer console (F12) for any JavaScript errors
• Certifique-se de que a tag do script está na <head> seção
• Certifique-se de que o span âncora esteja presente e contenha o token correto do Helper
• Atualize a página forçadamente (Ctrl+Shift+R ou Cmd+Shift+R) para limpar os arquivos em cache.
• Verifique se o ID do seu site e o token do Helper estão corretos

Defina o rótulo como "Assistente" ou personalize-o para combinar com sua marca.

O que você pode personalizar

• Personalizar aparências Altere a cor e o texto do botão de Ajuda.
• Resposta do Assistente: Cole um texto de exemplo de alta qualidade que mostre o que você deseja que os usuários alcancem.
• Palavras-chave: Adicione ou remova palavras-chave para melhorar a precisão das sugestões
• Total de Assistentes: Crie Helpers adicionais para diferentes formulários ou áreas de texto

Personalizar

1. Ir para o painel
2. Selecione "Assistentes", em seguida, selecione o Assistente específico que deseja editar
3. Clique no "Editar" botão
4. Salvar Alterações
5. Salvar alterações

Depois de testar tudo localmente, é hora de implantar no seu site de produção.

Lista de Verificação Pré-Implantação

• Testou o Helper no seu ambiente local/de teste
• Você deve ver o botão Assistente aparecer ao lado de qualquer
• Teste com um navegador diferente:
• Testado em dispositivos móveis
• Verificou que as sugestões do Helper são úteis e precisas

Implantações atrasadas

1. Envie seus arquivos HTML atualizados para o seu servidor web
2. Certifique-se de que a tag do script está na <head> Adicione um âncora onde você deseja o botão de ajuda
3. Verifique se os spans âncora estão colocados corretamente ao lado das suas áreas de texto
4. Teste o Helper no seu site ao vivo
5. Monitore para quaisquer problemas ou erros