> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laburen.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Referencia del Chatbot

> Documentación técnica para implementar el widget de chat de Laburen

# Widget de Chatbot

El Chatbot de Laburen 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

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <script type="module">
      import Chatbox from 'https://cdn.jsdelivr.net/npm/@laburen/embeds@latest/dist/chatbox/index.js';

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

  <Tab title="React">
    ```jsx theme={null}
    // Instala el paquete primero
    // npm install @laburen/embeds
    // o
    // yarn add @laburen/embeds

    import { useEffect } from 'react';
    import { ChatboxBubble } from '@laburen/embeds';

    function App() {
      return (
        <div className="App">
          <h1>Mi Aplicación con Chatbot de Laburen</h1>
          
          {/* Widget de Burbuja */}
          <ChatboxBubble 
            agentId="TU_ID_DE_AGENTE"
          />
        </div>
      );
    }

    export default App;
    ```
  </Tab>
</Tabs>

## Opciones de Configuración

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <script type="module">
      import Chatbox from 'https://cdn.jsdelivr.net/npm/@laburen/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: 'customer@email.com',
          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>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ChatboxBubble } from '@laburen/embeds';

    function App() {
      const contactInfo = {
        firstName: 'John',
        lastName: 'Doe',
        email: 'customer@email.com',
        phoneNumber: '+33612345644',
        userId: '42424242',
      };

      const initialMessages = [
        'Hola John, ¿cómo estás hoy?',
        '¿Cómo puedo ayudarte?',
      ];

      return (
        <div className="App">
          <ChatboxBubble 
            agentId="TU_ID_DE_AGENTE"
            contact={contactInfo}
            initialMessages={initialMessages}
            context="El usuario con el que estás hablando es John. Comienza saludándolo por su nombre."
          />
        </div>
      );
    }

    export default App;
    ```
  </Tab>
</Tabs>

## Parámetros de Configuración

<ParamField path="agentId" type="string" required>
  ID del Agente que responderá a las consultas. Puedes encontrar este ID en tu Dashboard de Laburen.
</ParamField>

<ParamField path="contact" type="object">
  <Expandable title="propiedades">
    <ResponseField name="firstName" type="string">
      Nombre del usuario
    </ResponseField>

    <ResponseField name="lastName" type="string">
      Apellido del usuario
    </ResponseField>

    <ResponseField name="email" type="string">
      Correo electrónico del usuario
    </ResponseField>

    <ResponseField name="phoneNumber" type="string">
      Número de teléfono del usuario
    </ResponseField>

    <ResponseField name="userId" type="string">
      ID de usuario personalizado para identificación en tu sistema
    </ResponseField>
  </Expandable>
</ParamField>

<ParamField path="initialMessages" type="string[]">
  Array de mensajes iniciales que el Agente enviará al comenzar la conversación
</ParamField>

<ParamField path="context" type="string">
  Contexto adicional que se agregará al mensaje del sistema del Agente para personalizar sus respuestas
</ParamField>

## Métodos del Widget

<ParamField path="open" type="function">
  Abre el Chatbox de Burbuja

  ```js theme={null}
  // HTML/JavaScript
  const widget = await Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',
  });

  widget.open();

  // React (usando ref)
  import { useRef } from 'react';
  import { ChatboxBubble } from '@laburen/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>
    );
  }
  ```
</ParamField>

<ParamField path="close" type="function">
  Cierra el Chatbox de Burbuja

  ```js theme={null}
  // HTML/JavaScript
  const widget = await Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',
  });

  widget.close();

  // React (usando ref)
  import { useRef } from 'react';
  import { ChatboxBubble } from '@laburen/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>
    );
  }
  ```
</ParamField>

<ParamField path="toggle" type="function">
  Alterna entre abrir y cerrar el Chatbox de Burbuja

  ```js theme={null}
  // HTML/JavaScript
  const widget = await Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',
  });

  widget.toggle();

  // React (usando ref)
  import { useRef } from 'react';
  import { ChatboxBubble } from '@laburen/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>
    );
  }
  ```
</ParamField>

<ParamField path="createNewConversation" type="function">
  Crea una nueva conversación, útil cuando quieres reiniciar el chat

  ```js theme={null}
  // HTML/JavaScript
  const widget = await Chatbox.initBubble({
    agentId: 'TU_ID_DE_AGENTE',
  });

  widget.createNewConversation();

  // React (usando ref)
  import { useRef } from 'react';
  import { ChatboxBubble } from '@laburen/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>
    );
  }
  ```
</ParamField>

## Personalización Avanzada

Para personalizar la apariencia del widget, puedes utilizar las siguientes opciones:

```js theme={null}
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',
  }
});
```

<Note>
  Para obtener ayuda adicional con la implementación, contacta a nuestro equipo de soporte en [support@laburen.com](mailto:support@laburen.com).
</Note>