Guia de Instalação

Instalar o AI Anywhere no seu site é simples. Você pode usar seu Helper de duas maneiras: a Página do Helper (sem código: link compartilhável, use de qualquer navegador) ou incorporar o Botão do Helper no seu site. Este guia cobre o caminho de incorporação.

Duas Maneiras de Usar Seu Assistente

• Página de Ajuda (sem código): Obtenha um link compartilhável do seu painel. Sem código, sem integração, sem snippet. Abra em qualquer navegador ou compartilhe com outros; use de qualquer dispositivo sem implantação.
• Botão de Ajuda (incorporar): Adicione o script ao seu <head> e a âncora do Assistente ao lado da sua área de texto. O botão de Ajuda aparece no seu site ao lado do campo.

You can also set a Helper to "Both": it will be available as a shareable Helper Page link and embeddable on your site. For embed (or Both), you must create or select a Site (and its group) in the dashboard; the snippet uses that site's ID. The default Helper Page site cannot be used for embedding.

Sites e incorporação

To embed a Helper on your website, you need a Site in your dashboard (Sites → Add site, or select an existing one). Each new site gets a default group. Use that site's ID in the script tag. If you only use the Helper Page (shareable link), you do not need to create a separate site.

Pré-requisitos

Antes de começar, certifique-se de ter:

• Uma conta ativa no AI Anywhere: Inscreva-se em ai-anywhere.ai se você não\
• Um Assistente criado: No seu painel, crie um novo Helper. Configure o seletor e a Resposta do Helper.

Como o Assistente Funciona

O widget Assistente segue um processo simples de três etapas:

1. Lê: Quando um usuário clica no botão Assistente, ele lê o texto atual na área de texto ou campo de entrada associado.
2. Compara: O texto é comparado com a Resposta do Helper e palavras-chave configuradas para identificar áreas de melhoria.
3. Sugere: O Helper fornece sugestões contextuais para ajudar os usuários a escreverem conteúdos melhores e mais completos que correspondam à sua Resposta do Helper.

Incorporando o Script do Assistente

Para adicionar o AI Anywhere à sua página da web, você precisa:

1. Carregar o script do Assistente no seu <head> seção
2. Adicione o span âncora do Helper ao lado da sua área de texto ou campo de formulário

Passo 1: Carregar o Script

Adicione a tag de script ao seu HTML\ <head> Cole em seu site

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

Passo 2: Inicializar o Assistente

Adicione o span âncora do Helper ao lado da sua área de texto ou campo de formulário onde você deseja que o Helper apareça:

<span data-helper-anchor data-helper-token="your-helper-token"></span>

Exemplo Completo

Aqui está um exemplo completo mostrando ambas as partes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>para o Contact Form 7)</title>
  
  <!-- Incorporando o Script do Assistente -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="Sua Mensagem:"></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

Compreendendo a Configuração

Vamos detalhar cada opção de configuração:

• data-site: Um parâmetro de consulta que identifica sua conta e é compartilhado em todas as páginas do seu site
• data-helper-anchor: Seletor CSS onde o assistente deve aparecer
• data-helper-token: Chave única que identifica esta configuração específica do Assistente. Cada instância do Assistente requer sua própria chave única. Encontrada no seu painel quando você cria um Assistente.

Exemplo Visual

Aqui está o que os usuários verão quando o Assistente estiver ativo:

Teste e Verificação

Após adicionar seu trecho ao seu site, siga estas etapas para verificar se tudo está funcionando:

1. Atualize sua página: Salve seu arquivo HTML e atualize seu navegador (atualização forçada com Ctrl+Shift+R ou Cmd+Shift+R para limpar o cache).
2. Procure o botão Assistente: Você deve ver o botão Assistente aparecer ao lado de qualquer <textarea> ou <input type="text"> elementos na sua página.
3. Teste o Seletor: Digite algum texto no campo do formulário e clique no botão Helper. O Helper deve analisar seu texto e fornecer sugestões.
4. Verifique o console: Verifique o console do navegador (F12) para garantir que não há erros

Problemas Comuns e Solução de Problemas

Perguntas Frequentes

Funciona em todos os lugares?

O AI Anywhere funciona com elementos de formulário HTML padrão, incluindo:

• <textarea> elementos
• <input type="text"> campos
• <input type="email"> campos
• Divs editáveis (com configuração adicional)

Funciona em qualquer site, independentemente do framework (React, Vue, Angular, HTML puro, WordPress, etc.), desde que você possa adicionar a tag de script ao seu <head> seção.

Posso ocultar o botão?

Sim, você pode ocultar o botão do Assistente usando CSS, se necessário:

However, hiding the button means users won't be able to access the Helper. Consider making it visible only on specific pages or for specific user roles instead.

Posso usar vários Assistentes em uma página?

Sim! Você pode ter várias instâncias do Helper em uma única página, cada uma com configurações diferentes. Basta adicionar múltiplos spans âncoras com diferentes tokens do Helper:

<!-- Primeiro Auxiliar para o campo de mensagem -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- Segundo Auxiliar para o campo de notas -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

Cada Helper se anexará independentemente à sua localização especificada.