asyntai/agent-skills

Adicione um chatbot de IA com Asyntai

Asyntai adiciona um agente de suporte de IA a um site. Ele responde aos visitantes com base no conteúdo do próprio site, em mais de 80 idiomas, e passa o atendimento para um humano quando necessário. O chat é executado a partir de uma única tag de script, então a instalação é uma pequena edição.

Etapa 1: obter o ID do widget

Cada instalação precisa do ID do widget do site. Ele se parece com asyntai_ seguido por 12 letras e dígitos, por exemplo asyntai_1a2b3c4d5e6f.

1. Procure por um ID que o usuário já forneceu, ou que o projeto já tenha (pesquise no código por data-asyntai-id). Se o site já tiver o snippet, não adicione um segundo.
2. Se o servidor MCP do Asyntai estiver conectado, chame list_websites. Cada site tem um widget_id.
3. Caso contrário, peça ao usuário por ele. Diga a ele onde está: faça login em https://asyntai.com/dashboard, abra a página Instalação e copie o valor de data-asyntai-id do snippet.
4. Se o usuário não tiver uma conta, ele pode criar uma gratuitamente em https://asyntai.com/auth/. O plano Gratuito é suficiente para testar o chatbot.

Nunca invente um ID de widget. Se você não tiver nenhum, coloque o espaço reservado YOUR_WIDGET_ID no código e diga ao usuário para substituí-lo.

Etapa 2: descobrir com o que o site é construído

• Um construtor hospedado ou CMS (WordPress, Shopify, Wix, Webflow, Squarespace, HubSpot, Ghost, Moodle e outros): o usuário instala o widget no painel de administração dessa plataforma, não no código. Encontre a plataforma em references/platforms.md e forneça ao usuário esse link do guia e suas etapas resumidas.
• Uma base de código: verifique package.json, os arquivos de configuração e a estrutura de pastas, depois siga references/frameworks.md. Ele tem a edição exata para cada stack e os pacotes Asyntai para ferramentas de site estático e documentação.

Etapa 3: adicionar o snippet

Este é o snippet oficial. Mantenha-o exatamente como mostrado e altere apenas YOUR_WIDGET_ID:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Ele aguarda o evento load da página, portanto, não a torna mais lenta. Coloque-o uma vez, no layout compartilhado que todas as páginas usam (antes de </body> ou no <head>). Não o coloque em um componente de página única, ou o chat aparecerá apenas nessa página.

Etapa 4: verificar o resultado

1. Execute o site (ou compile-o) e abra uma página.
2. O botão de chat aparece no canto inferior. O widget é desenhado dentro do elemento #asyntai-widget-host-<ID do widget>. No console do navegador, document.querySelectorAll('script[data-asyntai-id]').length deve ser 1.
3. Se o botão não aparecer:

   • Verifique o console do navegador em busca de erros Asyntai Widget:.

   • Se o site enviar uma Política de Segurança de Conteúdo (CSP), ela deve permitir estas origens:

     Diretiva	Origens
     script-src	https://widget.asyntai.com https://asyntai.com (e 'unsafe-inline' para o snippet, ou use o formato abreviado de references/frameworks.md)
     connect-src	https://asyntai.com
     style-src	'unsafe-inline'
     img-src	data: https://flagcdn.com

Etapa 5: informar ao usuário o que vem a seguir

O widget responde com base no conteúdo que o usuário adiciona no painel do Asyntai (https://asyntai.com/dashboard). Diga ao usuário para:

• adicionar suas páginas da web, arquivos ou texto como conhecimento,
• definir o nome do agente, cores e saudação no painel,
• ler o guia completo em https://asyntai.com/documentation/installation/ .

Se o servidor MCP do Asyntai estiver conectado, você pode fazer esta configuração por eles. Veja o skill manage-ai-support-agent.