Haz clic en "Agregar Nuevo Sitio" en tu panel, ingresa la URL de tu sitio web y recibirás un ID de Sitio único. Este ID conecta Minimal con tu sitio web.

Instala el Script

Copia el script proporcionado y pégalo antes de la etiqueta de cierre </body> en tu sitio web. El widget aparecerá automáticamente.

<script src="https://minimal.lat/embed.js" data-site-id="your-site-id"></script>

Personaliza y Lanza

Desde tu panel, personaliza colores, posición, mensajes de bienvenida y más. ¡Los cambios se aplican instantáneamente – sin necesidad de actualizar tu código!

Guía de Integración

Elige tu plataforma y sigue las instrucciones de instalación. ¿Necesitas ayuda? Consulta nuestra página de integración detallada.

Plataformas Web

Instala Minimal en cualquier sitio web con una simple etiqueta de script o usa nuestros paquetes específicos para frameworks.

HTML/JavaScript - Etiqueta de script de una línea
React - Paquete npm con hooks
Vue.js - Plugin para Vue 3
Angular - Módulo nativo
Next.js - Optimizado para SSR

E-commerce & CMS

Integraciones nativas para plataformas populares con fácil configuración desde el panel.

WordPress - Plugin del repositorio
Shopify - App de la tienda de apps
WooCommerce - Extensión de WordPress
Webflow - Integración de código personalizado
Squarespace - Inyección de código

Personalización Avanzada

Configuración Usando Atributos

Puedes personalizar Minimal directamente en la etiqueta de script usando atributos de datos:

<script
  src="https://minimal.lat/embed.js"
  data-site-id="your-site-id"
  data-position="bottom-right"
  data-theme="auto"
  data-language="es"
></script>

Opciones de Personalización

Posición: bottom-right, bottom-left, top-right, top-left

Tema: light, dark, auto (sigue la preferencia del sistema)

Idioma: en, es, fr, de, pt, y más

Saludo: Cualquier texto personalizado para el mensaje inicial

Color Primario: Código de color hexadecimal (ej., #10b981)

Configuración Avanzada de JavaScript

Para más control, usa la configuración de JavaScript:

window.MinimalConfig = {
  siteId: 'your-site-id',
  position: 'bottom-right',
  theme: 'auto',
  language: 'es',
  greeting: '¡Hola! ¿Cómo podemos ayudarte?',
  placeholder: 'Escribe tu mensaje...',

  // Opciones avanzadas
  autoOpen: false,
  autoOpenDelay: 3000, // milisegundos
  hideOnPages: ['/checkout', '/payment'],
  showOnPages: ['*'], // todas las páginas por defecto

  // Estilos
  customColors: {
    primary: '#10b981',
    background: '#ffffff',
    text: '#1f2937'
  },

  // Comportamiento
  collectEmail: true,
  requireEmail: false,
  enableFileUploads: true,
  maxFileSize: 10 // MB
};

<script src="https://minimal.lat/embed.js"></script>

Comprende tus Análisis

Métricas de Interacción

Rastrea cómo los visitantes interactúan con tu chat:

Vistas del Widget: Número de veces que se mostró el widget
Tasa de Apertura: Porcentaje de visitantes que abrieron el chat
Mensajes Enviados: Total de mensajes de visitantes
Conversaciones Iniciadas: Nuevos hilos de conversación
Tiempo Promedio de Respuesta: Qué tan rápido respondes

Información de Usuarios

Comprende el comportamiento de tus visitantes:

Horas Pico: Cuando los visitantes están más activos
Páginas Populares: Donde comienzan las conversaciones
Desglose por Dispositivo: Uso de escritorio vs. móvil
Datos Geográficos: De dónde vienen tus visitantes
Visitantes Recurrentes: Rastrea interacciones repetidas

Seguimiento de Conversiones

Mide el impacto en el negocio:

Tasa de Captura de Leads: Porcentaje de chats que recopilan correos
Leads Calificados: Conversaciones marcadas como listas para ventas
Completación de Objetivos: Eventos de conversión personalizados
Atribución de Ingresos: Ventas vinculadas a interacciones de chat
Métricas de ROI: Cálculos de retorno de inversión

Preguntas Frecuentes

¿Cómo personalizo los colores del widget?

Puedes personalizar los colores de dos maneras:

Panel de Control: Ve a Configuración → Apariencia y usa el selector de color para elegir los colores de tu marca.
Código: Usa la opción customColors en la configuración de JavaScript:

customColors: {
  primary: '#10b981',    // Color principal
  background: '#ffffff', // Fondo del chat
  text: '#1f2937'       // Color del texto
}

¿Puedo ocultar el widget en páginas específicas?

¡Sí! Usa la opción de configuración hideOnPages:

hideOnPages: ['/checkout', '/payment', '/admin/*']

Soporta comodines para coincidencias de patrones. También puedes usar showOnPages para mostrar solo en páginas específicas.

¿Cómo integro con Google Analytics?

Minimal rastrea automáticamente eventos que puedes capturar en Google Analytics:

window.addEventListener('minimal:message', function(e) {
  gtag('event', 'chat_message_sent', {
    'event_category': 'engagement',
    'event_label': 'Chat Interaction'
  });
});

Consulta nuestra Guía de Integración para más plataformas de análisis.

¿Qué pasa si alcanzo los límites de mi plan?

Te notificaremos por correo electrónico cuando alcances el 80% de los límites de tu plan. Si excedes:

Conversaciones: El widget continúa funcionando, pero necesitarás actualizar para acceder a nuevas conversaciones en el panel.
Vistas de Página: El seguimiento continúa y puedes actualizar en cualquier momento para acceder al análisis completo.

Tus visitantes nunca verán ninguna interrupción en el servicio.

Solución de Problemas

Problemas comunes y cómo resolverlos.

El Widget No Aparece

Si el widget no se muestra en tu sitio:

Verifica que el script esté colocado antes de la etiqueta de cierre </body>
Verifica que tu ID de Sitio sea correcto en el panel de control
Asegúrate de que JavaScript esté habilitado en tu navegador
Limpia la caché de tu navegador y recarga forzadamente (Ctrl+Shift+R o Cmd+Shift+R)
Revisa la consola del navegador en busca de mensajes de error

Problemas de Posición del Widget

Si el widget aparece en la posición incorrecta o se superpone con otros elementos:

Ajusta la configuración de posición en tu panel (bottom-right, bottom-left, etc.)
Verifica conflictos de CSS con valores altos de z-index en tu sitio
Usa CSS personalizado para anular el posicionamiento si es necesario
Prueba diferentes valores de desplazamiento para evitar superposiciones con otros elementos fijos

Las Conversaciones No Se Guardan

Si las conversaciones no aparecen en tu panel:

Verifica que hayas iniciado sesión en la cuenta correcta
Verifica que estés viendo el sitio correcto en el panel
Asegúrate de que tu plan no haya alcanzado los límites de conversaciones
Permite unos minutos para la sincronización de datos
Contacta al soporte si el problema persiste después de 15 minutos

Los Estilos No Se Aplican

Si los colores o estilos personalizados no se muestran:

Los cambios en el panel se aplican instantáneamente - no se necesitan actualizaciones de código
Limpia la caché del navegador para ver los últimos cambios de estilo
Verifica que CSS personalizado no esté anulando tu configuración
Verifica que los valores de color estén en formato hexadecimal válido (ej., #10b981)

Referencia de API

API de JavaScript para control y personalización avanzados.

Métodos de Control del Widget

// Abrir el widget
Minimal.open();

// Cerrar el widget
Minimal.close();

// Alternar estado del widget
Minimal.toggle();

// Verificar si el widget está abierto
const isOpen = Minimal.isOpen(); // devuelve booleano

// Destruir la instancia del widget
Minimal.destroy();

Seguimiento de Eventos

// Rastrear eventos personalizados
Minimal.trackEvent('event_name', {
  customData: 'value',
  userId: '12345'
});

// Establecer contexto de usuario
Minimal.setContext({
  userId: 'user_123',
  email: 'user@example.com',
  plan: 'premium'
});

// Identificar usuario
Minimal.identify({
  userId: 'user_123',
  name: 'John Doe',
  email: 'john@example.com'
});

Escuchadores de Eventos

// Escuchar eventos del widget
window.addEventListener('minimal:open', () => {
  console.log('Widget abierto');
});

window.addEventListener('minimal:close', () => {
  console.log('Widget cerrado');
});

window.addEventListener('minimal:message', (event) => {
  console.log('Mensaje enviado:', event.detail);
});

window.addEventListener('minimal:ready', () => {
  console.log('Widget inicializado');
});

Actualizaciones de Configuración

// Actualizar configuración en tiempo de ejecución
Minimal.updateConfig({
  theme: 'dark',
  position: 'bottom-left',
  greeting: 'Nuevo mensaje de bienvenida'
});

// Obtener configuración actual
const config = Minimal.getConfig();

¿Necesitas Más Ayuda?

¿No encuentras lo que buscas? Nuestro equipo de soporte está aquí para ayudar.

Contactar Soporte Ver Documentación Completa

Tiempo promedio de respuesta: menos de 2 horas