Skip to main content

​
Widget de Chatbot

El Chatbot de Flux1a está disponible a través de nuestro CDN como un único archivo JavaScript o a través de NPM como un paquete de componentes React. Esta referencia te ayudará a implementar y personalizar el widget en tu sitio web.

​
Instalación

  • HTML
  • React
<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@Flux1a/embeds@latest/dist/chatbox/index.js';

  Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',
  });
</script>

​
Opciones de Configuración

  • HTML
  • React
<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@Flux1a/embeds@latest/dist/chatbox/index.js';

  Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',

    // Si se proporciona, creará un contacto para el usuario y lo vinculará a la conversación
    contact: {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]',
      phoneNumber: '+33612345644',
      userId: '42424242',
    },
    // Sobrescribir mensajes iniciales
    initialMessages: [
      'Hola John, ¿cómo estás hoy?',
      '¿Cómo puedo ayudarte?',
    ],
    // El contexto proporcionado se agregará al mensaje del sistema del Agente
    context: "El usuario con el que estás hablando es John. Comienza saludándolo por su nombre.",
  });
</script>

​
Parámetros de Configuración

​
agentId
string
required
ID del Agente que responderá a las consultas. Puedes encontrar este ID en tu Dashboard de Flux1a.
​
contact
object
​
initialMessages
string[]
Array de mensajes iniciales que el Agente enviará al comenzar la conversación
​
context
string
Contexto adicional que se agregará al mensaje del sistema del Agente para personalizar sus respuestas

​
Métodos del Widget

​
open
function
Abre el Chatbox de Burbuja
// HTML/JavaScript
const widget = await Chatbox.initBubble({
  agentId: 'TU_ID_DE_AGENTE',
});

widget.open();

// React (usando ref)
import { useRef } from 'react';
import { ChatboxBubble } from '@Flux1a/embeds';

function App() {
  const chatboxRef = useRef();
  
  const handleOpenChat = () => {
    if (chatboxRef.current) {
      chatboxRef.current.open();
    }
  };
  
  return (
    <div>
      <button onClick={handleOpenChat}>Abrir Chat</button>
      <ChatboxBubble ref={chatboxRef} agentId="TU_ID_DE_AGENTE" />
    </div>
  );
}
​
close
function
Cierra el Chatbox de Burbuja
// HTML/JavaScript
const widget = await Chatbox.initBubble({
  agentId: 'TU_ID_DE_AGENTE',
});

widget.close();

// React (usando ref)
import { useRef } from 'react';
import { ChatboxBubble } from '@Flux1a/embeds';

function App() {
  const chatboxRef = useRef();
  
  const handleCloseChat = () => {
    if (chatboxRef.current) {
      chatboxRef.current.close();
    }
  };
  
  return (
    <div>
      <button onClick={handleCloseChat}>Cerrar Chat</button>
      <ChatboxBubble ref={chatboxRef} agentId="TU_ID_DE_AGENTE" />
    </div>
  );
}
​
toggle
function
Alterna entre abrir y cerrar el Chatbox de Burbuja
// HTML/JavaScript
const widget = await Chatbox.initBubble({
  agentId: 'TU_ID_DE_AGENTE',
});

widget.toggle();

// React (usando ref)
import { useRef } from 'react';
import { ChatboxBubble } from '@Flux1a/embeds';

function App() {
  const chatboxRef = useRef();
  
  const handleToggleChat = () => {
    if (chatboxRef.current) {
      chatboxRef.current.toggle();
    }
  };
  
  return (
    <div>
      <button onClick={handleToggleChat}>Alternar Chat</button>
      <ChatboxBubble ref={chatboxRef} agentId="TU_ID_DE_AGENTE" />
    </div>
  );
}
​
createNewConversation
function
Crea una nueva conversación, útil cuando quieres reiniciar el chat
// HTML/JavaScript
const widget = await Chatbox.initBubble({
  agentId: 'TU_ID_DE_AGENTE',
});

widget.createNewConversation();

// React (usando ref)
import { useRef } from 'react';
import { ChatboxBubble } from '@Flux1a/embeds';

function App() {
  const chatboxRef = useRef();
  
  const handleNewConversation = () => {
    if (chatboxRef.current) {
      chatboxRef.current.createNewConversation();
    }
  };
  
  return (
    <div>
      <button onClick={handleNewConversation}>Nueva Conversación</button>
      <ChatboxBubble ref={chatboxRef} agentId="TU_ID_DE_AGENTE" />
    </div>
  );
}

​
Personalización Avanzada

Para personalizar la apariencia del widget, puedes utilizar las siguientes opciones: 
Chatbox.initBubble({
  agentId: 'TU_ID_DE_AGENTE',
  // Personalización de colores
  theme: {
    primaryColor: '#2563EB', // Color principal
    backgroundColor: '#FFFFFF', // Color de fondo
    textColor: '#1F2937', // Color del texto
    bubbleColor: '#2563EB', // Color del botón de burbuja
  },
  // Personalización de textos
  labels: {
    welcomeMessage: '¡Hola! ¿En qué puedo ayudarte hoy?',
    placeholderText: 'Escribe tu pregunta aquí...',
    sendButtonText: 'Enviar',
  }
});
Para obtener ayuda adicional con la implementación, contacta a nuestro equipo de soporte en [email protected].