Desplegar Agente en la Web

Aprende cómo agregar tu agente de IA a tu sitio web usando el widget de chat de AgentsGT. Esta guía te llevará paso a paso por la integración del agente en cualquier página web.

¿Qué es el Despliegue Web?

El despliegue web te permite incrustar tu agente de IA como un widget de chat en tu sitio web. Los visitantes pueden interactuar con tu agente directamente en tus páginas web sin salir de tu sitio.

Beneficios:

Soporte al cliente instantáneo
Generación y calificación de leads
Recomendaciones de productos
Disponibilidad 24/7
Experiencia de usuario fluida

Requisitos Previos

Antes de desplegar en la web, asegúrate de tener:

✓ Tu agente creado y configurado
✓ Tu agente probado y las respuestas verificadas
✓ Acceso al código de tu sitio web o sistema de gestión de contenido
✓ Conocimiento básico de HTML (o alguien que pueda ayudarte)

Paso 1: Abre Tu Agente

Ve a tu lista de agentes y haz clic en el agente que deseas agregar a tu sitio web.

AgentsGT Homepage

Paso 2: Ve a Integraciones

En la página de tu agente, haz clic en la sección "Integrations".

AgentsGT Homepage

Aquí encontrarás todas las formas de conectar tu agente a diferentes plataformas.

Paso 3: Haz Clic en Código de Inserción

En la sección de Integraciones, encuentra y haz clic en "Embed Code".

AgentsGT Homepage

Esto te mostrará el código para agregar tu agente a tu sitio web.

Simplemente haz clic en el botón "Copy Code" para copiar el código a tu portapapeles.

AgentsGT Homepage

El código se verá algo así:

<div id="agentsgt-container"></div>
<script>
(function(w,d,c,v,o){
  var t,l=d.createElement('link'),s=d.createElement('script');
  l.rel='stylesheet';
  l.href = v + '/dist/agentsgt-widget.css';
  s.src = v + '/dist/widget.umd.js';
  l.onload=function(){d.body.appendChild(s)};
  s.onload=function(){w.AgentSGTWidget&&w.AgentSGTWidget.loadWidget(c,o)};
  d.head.appendChild(l)
})(window,document,'agentsgt-container','https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',{
  name: 'AgentSGT Assistant',
  initialMessage: 'How can I help?',
  runtimeUrl: 'Your runtime URL',
  basePath: 'https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',
  apiKey: 'Your api key'
});
</script>

Ahora que tienes el código, necesitas agregarlo a tu sitio web. Elige el método que corresponda a la plataforma de tu sitio web:

Método 1: Sitio Web Regular (HTML)

Si tienes un sitio web regular o acceso a archivos HTML:

Paso 1: Abre el Archivo HTML de Tu Sitio Web

Encuentra el archivo HTML principal de tu sitio web. Generalmente se llama index.html o algo similar.

Paso 2: Pega el Código al Final

Desplázate hasta el final del archivo y encuentra la etiqueta </body>.

Pega el código del widget justo antes de esta etiqueta </body>:

    <!-- Your existing HTML content -->

    <!-- AgentsGT Chat Widget -->
    <div id="agentsgt-container"></div>
    <script>
    (function(w,d,c,v,o){
      var t,l=d.createElement('link'),s=d.createElement('script');
      l.rel='stylesheet';
      l.href = v + '/dist/agentsgt-widget.css';
      s.src = v + '/dist/widget.umd.js';
      l.onload=function(){d.body.appendChild(s)};
      s.onload=function(){w.AgentSGTWidget&&w.AgentSGTWidget.loadWidget(c,o)};
      d.head.appendChild(l)
    })(window,document,'agentsgt-container','https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',{
      name: 'AgentSGT Assistant',
      initialMessage: 'How can I help?',
      runtimeUrl: 'Your runtime URL',
      basePath: 'https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',
      apiKey: 'Your api key'
    });
    </script>
  </body>
</html>

Paso 3: Guarda y Míralo en Vivo

Guarda tu archivo HTML
Súbelo a tu servidor web (si estás editando localmente)
Visita tu sitio web - ¡deberías ver aparecer el widget de chat!

Método 2: Sitio Web en WordPress

Si tu sitio web usa WordPress, es aún más fácil:

Usando un Plugin (La Forma Más Fácil)

En tu administrador de WordPress, ve a Plugins → Add New
Busca "Insert Headers and Footers" o "Code Snippets"
Instala y activa el plugin
Ve a la página de configuración del plugin
Pega el código de tu widget en la sección Footer
Haz clic en Save
¡Visita tu sitio web para ver el widget!

¿Por qué usar un plugin? Es más seguro y no se perderá cuando actualices tu tema.

Método 3: Tienda en Shopify

Si tienes una tienda en Shopify:

En tu administrador de Shopify, ve a Online Store → Themes
Haz clic en Actions → Edit Code
Encuentra y haz clic en theme.liquid en la carpeta Layout
Desplázate hacia abajo y encuentra la etiqueta </body>
Pega el código de tu widget justo antes de </body>
Haz clic en Save
¡Visita tu tienda para ver el widget!

Método 4: Otras Plataformas Web

Wix:

Ve a Settings → Custom Code
Haz clic en + Add Custom Code
Pega el código de tu widget
Elige Body - End
Aplica a All Pages
Haz clic en Apply

Squarespace:

Ve a Settings → Advanced → Code Injection
Pega tu código en el campo Footer
Haz clic en Save

Webflow:

Ve a Project Settings → Custom Code
Pega tu código en el campo Footer Code
Haz clic en Save
Publica tu sitio

Google Tag Manager:

Crea una nueva etiqueta llamada "AgentsGT Widget"
Elige Custom HTML como tipo de etiqueta
Pega el código de tu widget
Configura el disparador a All Pages
Guarda y publica

Asegúrate de Que Todo Funcione

Después de agregar el código, es importante probar que todo esté funcionando correctamente.

Abre tu sitio web en un navegador. Deberías ver una pequeña burbuja de chat (generalmente en la esquina inferior derecha).

Si no lo ves:

Actualiza la página (Ctrl+R o Cmd+R)
Limpia la caché de tu navegador
Asegúrate de haber guardado tus cambios

2. Prueba el Chat

Haz clic en la burbuja de chat para abrirlo.

Prueba estas cosas:

Envía un mensaje de prueba
Verifica si tu agente responde
Cierra y vuelve a abrir el widget
Asegúrate de que se vea bien en tu sitio web

3. Prueba en Tu Teléfono

¡Abre tu sitio web en tu teléfono para asegurarte de que el widget también funcione en dispositivos móviles!

El widget debería ajustarse automáticamente para adaptarse a pantallas más pequeñas.

Problemas Comunes y Soluciones

Si no ves el widget en tu sitio web:

Actualiza tu navegador - Presiona Ctrl+R (Windows) o Cmd+R (Mac)
Limpia tu caché - A veces se almacenan versiones antiguas en caché
Verifica si guardaste - Asegúrate de haber guardado el archivo con el código
Busca el código - Verifica que el código esté realmente en tu sitio web
Revisa tu agente - Asegúrate de que tu agente esté activo en AgentsGT

Si el widget aparece pero no responde:

Revisa el estado de tu agente - Ve a AgentsGT y asegúrate de que tu agente esté activo
Verifica tus créditos - Asegúrate de tener créditos disponibles
Prueba tu agente - Intenta chatear con él directamente en AgentsGT primero

Simplemente elimina el código que agregaste a tu sitio web y guarda el archivo. El widget desaparecerá.

¿Qué Sigue?

¡Felicidades! Tu agente de IA ahora está en vivo en tu sitio web.

Ahora puedes:

Desplegar en WhatsApp - Permite que los clientes chateen con tu agente en WhatsApp
Integración del Widget - Aprende integración avanzada para desarrolladores
Referencia de la API - Conecta tu agente a otros sistemas

¿Necesitas ayuda? Si algo no está funcionando, contacta a soporte e incluye:

La URL de tu sitio web
Qué no está funcionando
Capturas de pantalla si es posible

Desplegar Agente en la Web

¿Qué es el Despliegue Web?

Requisitos Previos