Widget de Inserción

Poniendo a Tu Asistente en Tu Sitio Web Lanzar

La página de Insertar te da el código para añadir a tu asistente a tu sitio web. Una vez instalado, tu asistente aparece como una burbuja de chat amigable en la que los visitantes pueden hacer clic para iniciar una conversación – como tener a un miembro del equipo disponible 24/7.

Código de inserción y vista previa

Obteniendo el Código

Copia el fragmento de código proporcionado y pégalo en tu sitio web. El código es único para tu asistente e incluye todo el estilo que has configurado en Apariencia.

Paso a Paso para Diferentes Sitios Web

Sitio Web Básico

Copia el código de la página de Insertar en tu panel de control
Abre tu archivo HTML en un editor de código

Pega antes de </body>

<!-- Widget de Chat de Tu Asistente -->
<script
  src="https://app.mygptassistants.com/widget.js"
  data-bot-id="TU_BOT_ID"
  async
></script>
</body>

Guarda y sube tu sitio web

WordPress

Instala un plugin de código como “Insert Headers and Footers” o “WPCode”
Ve a la configuración del plugin en tu admin de WordPress

Pega en la sección de footer

<script
  src="https://app.mygptassistants.com/widget.js"
  data-bot-id="TU_BOT_ID"
  async
></script>

Guarda tus cambios

Shopify

Ve a Tienda Online → Temas en el admin de Shopify
Haz clic en Acciones → Editar código
Encuentra theme.liquid en la carpeta Layout

Pega antes de </body>

<script
  src="https://app.mygptassistants.com/widget.js"
  data-bot-id="TU_BOT_ID"
  async
></script>

Guarda el archivo

React / Next.js

Crea un componente para el widget de chat:

import { useEffect } from 'react';

export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.mygptassistants.com/widget.js';
    script.setAttribute('data-bot-id', 'TU_BOT_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Luego añádelo a tu layout o app:

import ChatWidget from './components/ChatWidget';

export default function App() {
  return (
    <>
      {/* Tu contenido de la app */}
      <ChatWidget />
    </>
  );
}

Vue.js

Crea un componente:

<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://app.mygptassistants.com/widget.js';
  script.setAttribute('data-bot-id', 'TU_BOT_ID');
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

<template>
  <!-- El componente no renderiza nada -->
</template>

Añade a tu App.vue:

<template>
  <div id="app">
    <!-- Tu contenido de la app -->
    <ChatWidget />
  </div>
</template>

Otras Plataformas

Squarespace:

Ve a Configuración → Avanzado → Inyección de Código
Pega en la sección de Footer

Webflow:

Ve a Configuración del Proyecto → Código Personalizado
Pega en la sección de Código del Footer

Wix:

Usa el Editor de Código Velo
Añade el script a masterPage.js

Escucha lo que está pasando con el widget de chat:

// Saber cuándo los clientes interactúan con tu asistente
window.MGAWidget.on('open', () => {
  console.log('Chat abierto');
});

window.MGAWidget.on('close', () => {
  console.log('Chat cerrado');
});

window.MGAWidget.on('message', (data) => {
  console.log('Nuevo mensaje:', data);
});

Opciones de Personalización

Posición

Elige en qué esquina de la pantalla aparece tu asistente.

Icono de Chat

Personaliza la burbuja de chat que los visitantes hacen clic para empezar a chatear.

Colores

Haz que el widget coincida con los colores de tu marca.

Probando Tu Instalación

Añade el código a tu sitio web usando uno de los métodos anteriores
Visita tu sitio web y busca la burbuja de chat
Haz clic para abrir y ten una conversación de prueba
Revisa en móvil – asegúrate de que funcione en teléfonos y tablets también

Solución de Problemas

Temas Relacionados

Apariencia Personaliza cómo se ve tu asistente

Integraciones Otros lugares donde desplegar tu asistente

Configuración Ajusta cómo se comporta tu asistente