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

> Referencia

# Reference

El Chatbot está disponible a través de nuestro CDN como un archivo JavaScript único o a través de NPM como un paquete de componente React.

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

    Chatbox.initBubble({
    agentId: 'TU_AGENT_ID',
    });

    </script>

    ```
  </Tab>

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

    function App() {
    return (
    <Chatbox
    agentId="TU_AGENT_ID"
    contact={{
    firstName: 'John',
    lastName: 'Doe',
    email: 'customer@email.com',
    phoneNumber: '+33612345644',
    userId: '42424242',
    initialMessages={[
    'Hola Georges, ¿cómo estás hoy?',
    '¿Cómo puedo ayudarte?',
    ]}
    context="El usuario con quien estás hablando es John. Comienza saludándolo por su nombre."
    />
    );
    ```
  </Tab>
</Tabs>

## Atributos / Props

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

    Chatbox.initBubble({
    agentId: 'TU_AGENT_ID',

    // 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 Georges, ¿cómo estás hoy?',
    '¿Cómo puedo ayudarte?',
    ],
    // El contexto proporcionado se agregará al prompt del sistema del Agente
    context: "El usuario con quien estás hablando es John. Comienza saludándolo por su nombre.",

    });

    </script>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    <Chatbox
    agentId="TU_AGENT_ID"
    contact={{
    firstName: 'John',
    lastName: 'Doe',
    email: 'customer@email.com',
    phoneNumber: '+33612345644',
    userId: '42424242',
    initialMessages={[
    'Hola Georges, ¿cómo estás hoy?',
    '¿Cómo puedo ayudarte?',
    ]}
    context="El usuario con quien estás hablando es John. Comienza saludándolo por su nombre."
    />
    ```
  </Tab>
</Tabs>

<ParamField path="agentId" type="string" required>
  ID del Agente
</ParamField>

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

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

    <ResponseField name="email" type="string">
      Email
    </ResponseField>

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

    <ResponseField name="userId" type="string">
      ID de usuario personalizado
    </ResponseField>
  </Expandable>
</ParamField>

<ParamField path="initialMessages" type="string array">
  Mensajes iniciales del Agente
</ParamField>

<ParamField path="context" type="string">
  Contexto extra que se agregará al prompt del sistema del Agente
</ParamField>

## Métodos

<ParamField path="open" type="solo widget de burbuja">
  Abrir Chatbox de Burbuja

  ```js theme={null}
  const widget = await Chatbox.initBubble({
  agentId: 'TU_AGENT_ID',
  widget.open()

  ```
</ParamField>

<ParamField path="close" type="solo widget de burbuja">
  Cerrar Chatbox de Burbuja

  ```js theme={null}
  const widget = await Chatbox.initBubble({
  agentId: 'TU_AGENT_ID',
  widget.close()

  ```
</ParamField>

<ParamField path="toggle" type="solo widget de burbuja">
  ```js Alternar Chatbox de Burbuja theme={null}
  const widget = await Chatbox.initBubble({
  agentId: 'TU_AGENT_ID',
  widget.toggle()
  ```
</ParamField>

<ParamField path="createNewConversation">
  ```js Crear Nueva Conversación theme={null}
  const widget = await Chatbox.initBubble({
  agentId: 'TU_AGENT_ID',
  widget.createNewConversation()

  ```
</ParamField>

```
```