Saltar al contenido principal
ChattyBox Logo

Generador de IA Prompts

Utilice estas indicaciones con Cursor, Claude, v0, Bolt, Lovable, Replit u otro generador de IA cuando desee que instale ChattyBox por usted.

Antes de pegar un mensaje, copie el fragmento exacto del widget de su panel ChattyBox. Mantenga la clave del widget público API y data-api-url exactamente como se muestra.

Universal Prompt​

Prompt listo para copiar
Universal Prompt

Agregue ChattyBox a este sitio web.

Utilice este script desde mi panel ChattyBox:

Fragmento del 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. 1Cargue el script una vez en cada página pública donde los visitantes deberían ver el chatbot.
  2. 2Colóquelo cerca del final del cuerpo o utilice el cargador de scripts recomendado por el marco.
  3. 3No exponga las claves API del servidor privado, los tokens de administrador, los secretos del entorno ni las credenciales de servicio.
  4. 4Mantenga la clave pública ChattyBox del widget API exactamente como se proporciona.
  5. 5Mantenga data-api-url exactamente como lo proporciona el panel ChattyBox.
  6. 6Si este sitio tiene páginas en idiomas específicos, establezca data-locale en el idioma de la página o confíe en el atributo html lang de la página.
  7. 7Verifique que el widget aparezca, se abra, envíe una pregunta de prueba y muestre citas de fuentes.

Next.js / React Prompt​

Prompt listo para copiar
Next.js / React Prompt

Instale ChattyBox en este shell de aplicación Next.js o React.

Utilice este fragmento de widget de mi panel ChattyBox:

Fragmento del 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 implementación
  1. 1Para Next.js App Router, agregue el script en app/layout.tsx con next/script y strategy="afterInteractive".
  2. 2Para Next.js Pages Router, agréguelo en pages/_app.tsx o pages/_document.tsx usando el cargador de scripts recomendado del marco.
  3. 3Para un React SPA, cargue el script una vez en el shell de la aplicación de nivel superior o index.html, no dentro de cada componente de ruta.
  4. 4No cree un punto final de backend ni un proxy para este fragmento de widget público.
  5. 5No mueva la clave del widget público API a una variable de entorno privada exclusiva del servidor a menos que la compilación aún la envíe al navegador.
  6. 6Mantenga data-api-key y data-api-url exactamente como se proporciona.
  7. 7Después de la implementación, dígame qué archivo cambió y cómo probar que el widget se abre y responde con citas.

Docusaurus Prompt​

Prompt listo para copiar
Docusaurus Prompt

Instale ChattyBox en este sitio de documentación Docusaurus.

Utilice este fragmento de widget de mi panel ChattyBox:

Fragmento del 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. 1Agregue el script una vez para todo el sitio de documentos, preferiblemente en src/theme/Root.tsx o src/theme/Root.js.
  2. 2Mantenga intactos el tema Docusaurus, la barra de navegación, el pie de página, los análisis y el comportamiento de i18n.
  3. 3No agregue el script a cada página de Markdown individual.
  4. 4Si el sitio tiene rutas localizadas, use data-locale solo cuando sea necesario y haga coincidirlo con el idioma de la página actual.
  5. 5Confirme que el script todavía incluye data-api-key y data-api-url.
  6. 6Después de la implementación, ejecute la compilación Docusaurus o el comando de verificación de documentos existente del proyecto.

WordPress o CMS Prompt​

Prompt listo para copiar
WordPress o CMS Prompt

Agregue ChattyBox a este sitio web WordPress o CMS.

Utilice este fragmento de widget de mi panel ChattyBox:

Fragmento del 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. 1Agregue el script a través de la ruta de código personalizado global más segura disponible: scripts de pie de página de tema, un pie de página de tema secundario, un complemento de script de encabezado/pie de página, el área HTML personalizada global CMS o Google Tag Manager.
  2. 2Cárguelo en páginas públicas, publicaciones, documentos y artículos de la base de conocimientos donde los visitantes puedan hacer preguntas.
  3. 3No lo cargue en páginas de administración, pago, cuenta, solo prueba o membresía privada a menos que se solicite explícitamente.
  4. 4No elimine data-api-key, data-api-url o async del script.
  5. 5Si CMS tiene plantillas de idioma independientes, configure data-locale con el código de idioma correspondiente cuando corresponda.
  6. 6Dame el lugar exacto donde se agregó el script y un breve plan de prueba del navegador.

Google Tag Manager Prompt​

Prompt listo para copiar
Google Tag Manager Prompt

Cree instrucciones para instalar ChattyBox con Google Tag Manager.

Utilice este fragmento de widget de mi panel ChattyBox:

Fragmento del 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. 1Cree una etiqueta HTML personalizada con el script exacto anterior.
  2. 2Utilice un activador Todas las páginas a menos que especifique un conjunto más limitado de páginas públicas.
  3. 3Mencione la configuración de consentimiento si este contenedor GTM usa el modo de consentimiento.
  4. 4Incluya comprobaciones en modo de vista previa para la activación de etiquetas, la aparición del iniciador de widgets, el envío de una pregunta de prueba y la aparición de citas.
  5. 5No sugiera agregar claves privadas API o secretos de servidor a GTM.

Validación posterior a la instalación Prompt​

Prompt listo para copiar
Validación posterior a la instalación Prompt

Revise esta instalación ChattyBox para saber si está lista para el lanzamiento.

Consulta estos requisitos
  1. 1El script del widget se carga una vez en las páginas públicas previstas.
  2. 2El script incluye src="https://chattybox.ai/widget.js".
  3. 3El script incluye data-api-key y data-api-url.
  4. 4El idioma de la página y cualquier valor data-locale coinciden con el contenido de la página.
  5. 5En la consola del navegador no falta ningún atributo ChattyBox, clave no válida ni errores de origen.
  6. 6El widget se abre, envía una pregunta de prueba realista, respuestas de contenido indexado y muestra citas de fuentes.
  7. 7El sitio no expone claves de servidores privados ni secretos no relacionados.

Devuelva cualquier problema con las rutas de los archivos, las referencias exactas del código y la solución segura más pequeña.