Resumen
Puedes instalar Astra en cualquier sitio web en solo unos pasos copiando un fragmento de código de tu panel de Astra y pegándolo en el HTML de tu sitio. Una vez instalado, puedes elegir cómo aparece Astra, ya sea como un widget de chat, una vista de spotlight o con la función opcional de resaltador mágico.
Instrucciones
Sigue estos pasos para instalar Astra en tu sitio web:
Paso 1: Obtén tu código de instalación
Inicia sesión en tu panel de Astra en https://astra.wati.io.
Haz clic en el botón Instalar agente.
Selecciona Copiar código para copiar tu código de instalación.
Paso 2: Agrega el código a tu sitio web
Ubica el archivo correcto para tu tipo de sitio web y pega el código antes de la etiqueta de cierre </body>.
Sitios web de HTML generales: Agrega el código en tu archivo de HTML principal (generalmente
index.htmldentro de la carpetapublic_html).React.js: Abre el archivo
public/index.htmly pega el código justo antes de la etiqueta de cierre</body>.Next.js: Crea un archivo
_document.jsdentro de la carpetapages, luego incluye el script antes de la etiqueta de cierre</body>.Otros sitios web: Encuentra el archivo donde se administra el HTML y pega el código antes de la etiqueta de cierre
</body>.
Así es como se ve:
<!-- Tu código HTML existente aquí -->
<!-- Pega el código de Astra aquí -->
</body>
Paso 3: Guarda y verifica
Guarda tus cambios y despliega (si es necesario).
Refresca tu sitio web, deberías ver el widget de Astra aparecer.
Opciones de implementación
Una vez instalado, Astra puede aparecer en tu sitio web de diferentes maneras. También puedes habilitar la función resaltador mágico para una experiencia interactiva.
1. Widget (burbuja de chat en la esquina inferior derecha)
Aparece como una burbuja de chat en la esquina inferior derecha de tu página web.
Utiliza tu icono personalizado para una apariencia personalizada.
Muestra posibles inicios de conversación, como preguntas comunes.
Los visitantes pueden hacer clic en una pregunta y el agente de IA responde directamente.
2. Spotlight (vista de chat en el centro inferior)
Aparece como una ventana de chat estilo spotlight en el centro inferior de tu pantalla.
Los visitantes pueden seleccionar una pregunta y el agente de IA proporcionará una respuesta.
3. Resaltador mágico
Permite a los visitantes hacer preguntas resaltando cualquier texto en tu sitio.
Por ejemplo, si alguien resalta “optimización de motores de búsqueda” y hace clic en Preguntar a Astra (o Preguntar al agente), el agente de IA generará y responderá la pregunta.
La función escanea toda la base de conocimientos de tu sitio web para proporcionar la respuesta más relevante.
Elegir la opción correcta
Elige entre el widget o el spotlight dependiendo del diseño de tu sitio y las preferencias de la experiencia del visitante.
Ambos se pueden implementar utilizando el código de instalación que copiaste anteriormente.
El resaltador mágico se puede habilitar con cualquiera de las opciones para una navegación más interactiva.