Referencia del 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

HTML
React

<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>

// 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;

Opciones de Configuración

HTML
React

<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>

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;

Parámetros de Configuración

string

required

ID del Agente que responderá a las consultas. Puedes encontrar este ID en tu Dashboard de Laburen.

object

Show propiedades

string

Nombre del usuario

string

Apellido del usuario

string

Correo electrónico del usuario

string

Número de teléfono del usuario

string

ID de usuario personalizado para identificación en tu sistema

string[]

Array de mensajes iniciales que el Agente enviará al comenzar la conversación

string

Contexto adicional que se agregará al mensaje del sistema del Agente para personalizar sus respuestas

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 '@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>
  );
}

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 '@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>
  );
}

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 '@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>
  );
}

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 '@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>
  );
}

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 support@laburen.com.

Vision General

Privacidad

Widget de Chatbot

Instalación

Opciones de Configuración

Parámetros de Configuración

Métodos del Widget

Personalización Avanzada

​Widget de Chatbot

​Instalación

​Opciones de Configuración

​Parámetros de Configuración

​Métodos del Widget

​Personalización Avanzada

Widget de Chatbot

Instalación

Opciones de Configuración

Parámetros de Configuración

Métodos del Widget

Personalización Avanzada