Guía de Integración

Implementa Minimal en tu sitio web en minutos. Documentación técnica completa para desarrolladores y no-desarrolladores.

Integración Rápida (5 minutos)

La manera más simple de empezar con Minimal. Funciona con cualquier sitio web.

Obtén tu API Key

Regístrate en nuestra plataforma y obtén tu clave de API única.

Agrega el Script

Copia y pega este código antes del tag </body> en tu HTML:

¡Listo!

Refresca tu sitio web y verás el toggle de AI. El sistema automáticamente indexará tu contenido.

💡 Nota Importante

Reemplaza TU_API_KEY con la clave real que recibiste por email. El chat puede tardar 2-3 minutos en aparecer la primera vez mientras se indexa tu contenido.

Guías por Plataforma

📝

WordPress

Método 1: Plugin Personalizado

Crea un archivo minimal-chat.php en tu carpeta de plugins:

<?php
/*
Plugin Name: Minimal Chat
Description: Integración de Minimal AI Chat
Version: 1.0
*/

function minimal_chat_script() {
    echo '<script src="https://cdn.minimal.ai/v1/minimal.js" data-api-key="TU_API_KEY"></script>';
}
add_action('wp_footer', 'minimal_chat_script');
?>
                    

Método 2: Functions.php

Agrega este código al archivo functions.php de tu tema:

function add_minimal_chat() {
    wp_enqueue_script('minimal-chat', 'https://cdn.minimal.ai/v1/minimal.js', [], '1.0', true);
    wp_add_inline_script('minimal-chat', 'window.MinimalConfig = {apiKey: "TU_API_KEY"};', 'before');
}
add_action('wp_enqueue_scripts', 'add_minimal_chat');
                    

🛍️

Shopify

En tu panel de administración de Shopify:

Ve a Tienda online → Temas
Haz clic en Acciones → Editar código
Abre el archivo theme.liquid
Busca el tag </body>
Agrega el código justo antes:

<script src="https://cdn.minimal.ai/v1/minimal.js" 
        data-api-key="TU_API_KEY"
        data-ecommerce="true"></script>
                    

🛒 E-commerce Optimizado

El atributo data-ecommerce="true" habilita funcionalidades especiales para tiendas online como búsqueda de productos y asistencia de compra.

⚛️

React / Next.js

Instalación con NPM

npm install @minimal/react-chat

Uso en Componentes

import { MinimalChat } from '@minimal/react-chat';

function App() {
  return (
    <div>
      {/* Tu contenido */}
      <MinimalChat apiKey="TU_API_KEY" />
    </div>
  );
}
                    

Next.js con Script Component

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://cdn.minimal.ai/v1/minimal.js"
        data-api-key="TU_API_KEY"
        strategy="lazyOnload"
      />
    </>
  );
}
                    

🟢

Vue.js / Nuxt.js

Plugin para Vue 3

// plugins/minimal.client.js
export default defineNuxtPlugin(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.minimal.ai/v1/minimal.js';
  script.setAttribute('data-api-key', 'TU_API_KEY');
  document.body.appendChild(script);
});
                    

Composable para Vue

// composables/useMinimal.js
export const useMinimal = (apiKey) => {
  const loadMinimal = () => {
    if (process.client) {
      const script = document.createElement('script');
      script.src = 'https://cdn.minimal.ai/v1/minimal.js';
      script.setAttribute('data-api-key', apiKey);
      document.head.appendChild(script);
    }
  };

  onMounted(() => {
    loadMinimal();
  });
};
                    

📱

Wix / Squarespace

Wix

Ve a Configuración → SEO avanzado
Busca Código personalizado
Agrega en Código para todas las páginas:

<script src="https://cdn.minimal.ai/v1/minimal.js" data-api-key="TU_API_KEY"></script>
                    

Squarespace

Ve a Configuración → Avanzado → Inyección de código
En Pie de página, agrega:

<script src="https://cdn.minimal.ai/v1/minimal.js" data-api-key="TU_API_KEY"></script>
                    

🅰️

Angular

Servicio de Integración

// services/minimal.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MinimalService {
  private apiKey = 'TU_API_KEY';
  private loaded = false;

  loadMinimal(): Promise<void> {
    if (this.loaded) return Promise.resolve();

    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = 'https://cdn.minimal.ai/v1/minimal.js';
      script.setAttribute('data-api-key', this.apiKey);
      script.onload = () => {
        this.loaded = true;
        resolve();
      };
      document.body.appendChild(script);
    });
  }
}
                    

Uso en App Component

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { MinimalService } from './services/minimal.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private minimal: MinimalService) {}

  ngOnInit() {
    this.minimal.loadMinimal();
  }
}
                    

Configuración Avanzada

Opciones de Personalización

<script src="https://cdn.minimal.ai/v1/minimal.js" 
        data-api-key="TU_API_KEY"
        data-position="bottom-left"
        data-primary-color="#2196F3"
        data-theme="dark"
        data-language="es"
        data-welcome-message="¡Hola! ¿En qué puedo ayudarte?"
        data-placeholder="Escribe tu pregunta aquí..."
        data-auto-open="false"
        data-enable-typing="true"></script>
                    

Configuración con JavaScript

window.MinimalConfig = {
  apiKey: 'TU_API_KEY',
  ui: {
    position: 'bottom-right',
    theme: 'auto', // 'light' | 'dark' | 'auto'
    primaryColor: '#2196F3',
    borderRadius: '12px',
    fontFamily: 'inherit'
  },
  behavior: {
    autoOpen: false,
    enableTypingIndicator: true,
    enableSuggestions: true,
    enableFileUpload: false,
    maxMessageLength: 1000
  },
  content: {
    language: 'es',
    welcomeMessage: '¡Hola! ¿Cómo puedo ayudarte?',
    placeholder: 'Escribe tu mensaje...',
    errorMessage: 'Hubo un error. Inténtalo de nuevo.',
    offlineMessage: 'Chat no disponible temporalmente.'
  },
  advanced: {
    enableAnalytics: true,
    enableA11y: true,
    loadDelay: 2000,
    apiEndpoint: 'https://api.minimal.ai/v1'
  }
};
                    

Eventos y Callbacks

window.addEventListener('minimal:loaded', () => {
  console.log('Minimal chat loaded');
});

window.addEventListener('minimal:opened', () => {
  // Analytics tracking
  gtag('event', 'chat_opened', {
    'event_category': 'engagement'
  });
});

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

window.addEventListener('minimal:message:received', (event) => {
  console.log('Response received:', event.detail.response);
});
                    

API Reference

Métodos Disponibles

// Abrir el chat programáticamente
MinimalChat.open();

// Cerrar el chat
MinimalChat.close();

// Enviar mensaje programáticamente
MinimalChat.sendMessage('Hola, necesito ayuda');

// Actualizar configuración
MinimalChat.updateConfig({
  ui: { primaryColor: '#FF5722' }
});

// Obtener estadísticas de la sesión
const stats = MinimalChat.getSessionStats();
console.log(stats.messagesCount, stats.duration);

// Resetear conversación
MinimalChat.resetConversation();

// Activar/desactivar
MinimalChat.enable();
MinimalChat.disable();
                    

Integración con Analytics

// Google Analytics 4
window.addEventListener('minimal:message:sent', (event) => {
  gtag('event', 'chat_message_sent', {
    'message_length': event.detail.message.length,
    'session_id': event.detail.sessionId
  });
});

// Facebook Pixel
window.addEventListener('minimal:opened', () => {
  fbq('track', 'ChatEngagement');
});

// Custom Analytics
window.addEventListener('minimal:conversation:ended', (event) => {
  fetch('/api/analytics/chat-ended', {
    method: 'POST',
    body: JSON.stringify({
      duration: event.detail.duration,
      messageCount: event.detail.messageCount,
      resolved: event.detail.resolved
    })
  });
});
                    

Integración con CRM

// Enviar leads a tu CRM
window.addEventListener('minimal:lead:captured', (event) => {
  const leadData = {
    email: event.detail.email,
    name: event.detail.name,
    message: event.detail.message,
    source: 'minimal_chat'
  };
  
  // Ejemplo: Enviar a HubSpot
  fetch('https://api.hubspot.com/contacts/v1/contact/', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer TU_HUBSPOT_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(leadData)
  });
});
                    

Resolución de Problemas

Problemas Comunes

El chat no aparece

Verifica que tu API key sea correcta
Asegúrate de que el script esté antes del </body>
Revisa la consola del navegador para errores
Espera 2-3 minutos para el primer indexado

Conflictos con otros scripts

Carga Minimal después de otros scripts
Usa el atributo defer si es necesario
Contacta soporte si persisten los conflictos

Respuestas lentas o imprecisas

Verifica que tu sitio sea público y accesible
Asegúrate de que tu contenido esté bien estructurado (headings, párrafos)
Usa meta descripciones en tus páginas
Evita contenido duplicado o muy repetitivo

⚠️ Advertencia de Seguridad

Nunca compartas tu API key públicamente. Si crees que tu clave ha sido comprometida, contáctanos inmediatamente para regenerarla.

Validación de Instalación

Puedes verificar que Minimal esté funcionando correctamente usando esta función en la consola:

// Ejecutar en la consola del navegador
console.log('Minimal Status:', {
  loaded: typeof MinimalChat !== 'undefined',
  version: MinimalChat?.version,
  apiKey: MinimalChat?.config?.apiKey?.substring(0, 8) + '...',
  ready: MinimalChat?.isReady()
});
                

¿Necesitas Ayuda con la Integración?

Nuestro equipo técnico está disponible para ayudarte con implementaciones complejas, configuraciones personalizadas o cualquier problema técnico.

Obtener Soporte Técnico