Pular para o conteúdo principal
ChattyBox Logo

Construtor de IA Prompts

Use esses prompts com Cursor, Claude, v0, Bolt, Lovable, Replit ou outro construtor de IA quando desejar instalar ChattyBox para você.

Antes de colar um prompt, copie o snippet exato do widget do painel ChattyBox. Mantenha a chave do widget público API e data-api-url exatamente como mostrado.

Universal Prompt​

Prompt pronto a copiar
Universal Prompt

Adicione ChattyBox a este site.

Use este script do meu painel ChattyBox:

Trecho do widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="https://app.chattybox.ai"
async
></script>
Requisitos
  1. 1Carregue o script uma vez em cada página pública onde os visitantes deverão ver o chatbot.
  2. 2Coloque-o próximo ao final do corpo ou use o carregador de script recomendado pela estrutura.
  3. 3Não exponha chaves API de servidor privado, tokens de administrador, segredos de ambiente ou credenciais de serviço.
  4. 4Mantenha a chave pública do widget ChattyBox API exatamente como fornecida.
  5. 5Mantenha data-api-url exatamente como fornecido pelo painel ChattyBox.
  6. 6Se este site tiver páginas específicas para um idioma, defina data-locale para o idioma da página ou confie no atributo html lang da página.
  7. 7Verifique se o widget aparece, abre, envia uma pergunta de teste e mostra as citações da fonte.

Next.js / React Prompt​

Prompt pronto a copiar
Next.js / React Prompt

Instale ChattyBox neste shell do aplicativo Next.js ou React.

Use este snippet de widget do meu painel ChattyBox:

Trecho do widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="https://app.chattybox.ai"
async
></script>
Requisitos de implementação
  1. 1Para Next.js App Router, adicione o script em app/layout.tsx com next/script e strategy="afterInteractive".
  2. 2Para Next.js Pages Router, adicione-o em pages/_app.tsx ou pages/_document.tsx usando o carregador de script recomendado pela estrutura.
  3. 3Para um SPA React, carregue o script uma vez no shell do aplicativo de nível superior ou index.html, não dentro de cada componente de rota.
  4. 4Não crie um endpoint de backend ou proxy para este snippet de widget público.
  5. 5Não mova a chave API do widget público para uma variável de ambiente privada somente de servidor, a menos que a compilação ainda a envie para o navegador.
  6. 6Mantenha data-api-key e data-api-url exatamente como fornecidos.
  7. 7Após a implementação, diga-me qual arquivo foi alterado e como testar se o widget abre e responde com citações.

Docusaurus Prompt​

Prompt pronto a copiar
Docusaurus Prompt

Instale ChattyBox neste site de documentação Docusaurus.

Use este snippet de widget do meu painel ChattyBox:

Trecho do widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="https://app.chattybox.ai"
async
></script>
Requisitos
  1. 1Adicione o script uma vez para todo o site de documentos, de preferência em src/theme/Root.tsx ou src/theme/Root.js.
  2. 2Mantenha intactos o tema Docusaurus, a barra de navegação, o rodapé, as análises e o comportamento i18n existentes.
  3. 3Não adicione o script a cada página individual do Markdown.
  4. 4Se o site tiver rotas localizadas, use data-locale somente quando necessário e combine-o com o idioma atual da página.
  5. 5Confirme se o script ainda inclui data-api-key e data-api-url.
  6. 6Após a implementação, execute a compilação Docusaurus ou o comando de verificação de documentos existente do projeto.

WordPress ou CMS Prompt​

Prompt pronto a copiar
WordPress ou CMS Prompt

Adicione ChattyBox a este site WordPress ou CMS.

Use este snippet de widget do meu painel ChattyBox:

Trecho do widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="https://app.chattybox.ai"
async
></script>
Requisitos
  1. 1Adicione o script por meio do caminho de código personalizado global mais seguro disponível: scripts de rodapé de tema, um rodapé de tema filho, um plug-in de script de cabeçalho/rodapé, a área HTML personalizada global CMS ou Google Tag Manager.
  2. 2Carregue-o em páginas públicas, postagens, documentos e artigos da base de conhecimento onde os visitantes devem fazer perguntas.
  3. 3Não carregue-o nas páginas de administração, checkout, conta, somente teste ou de associação privada, a menos que seja explicitamente solicitado.
  4. 4Não retire data-api-key, data-api-url ou assíncrono do script.
  5. 5Se CMS tiver modelos de idioma separados, defina data-locale para o código de idioma correspondente quando apropriado.
  6. 6Dê-me o local exato onde o script foi adicionado e um breve plano de teste do navegador.

Google Tag Manager Prompt​

Prompt pronto a copiar
Google Tag Manager Prompt

Crie instruções para instalar ChattyBox com Google Tag Manager.

Use este snippet de widget do meu painel ChattyBox:

Trecho do widgetHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="https://app.chattybox.ai"
async
></script>
Requisitos
  1. 1Crie uma tag personalizada HTML com o script exato acima.
  2. 2Use um gatilho Todas as páginas, a menos que eu especifique um conjunto mais restrito de páginas públicas.
  3. 3Mencione as configurações de consentimento se este contêiner GTM usar o modo de consentimento.
  4. 4Inclui verificações no modo de visualização para o disparo da tag, a exibição do inicializador do widget, o envio de uma pergunta de teste e a exibição de citações.
  5. 5Não sugira adicionar chaves API privadas ou segredos de servidor a GTM.

Validação pós-instalação Prompt​

Prompt pronto a copiar
Validação pós-instalação Prompt

Revise esta instalação ChattyBox para preparação para lançamento.

Verifique estes requisitos
  1. 1O script do widget é carregado uma vez nas páginas públicas pretendidas.
  2. 2O script inclui src="https://chattybox.ai/widget.js".
  3. 3O script inclui data-api-key e data-api-url.
  4. 4O idioma da página e qualquer valor data-locale correspondem ao conteúdo da página.
  5. 5O console do navegador não possui nenhum atributo ausente ChattyBox, chave inválida ou erros de origem.
  6. 6O widget é aberto, envia uma pergunta de teste realista, responde a partir de conteúdo indexado e mostra citações de fontes.
  7. 7O site não expõe chaves privadas de servidores ou segredos não relacionados.

Retorne quaisquer problemas com caminhos de arquivos, referências exatas de código e a menor correção segura.