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

# React

## Instalar

```bash
npm install @mozbot/js @mozbot/react
```

## Estándar

```tsx
import { Standard } from '@mozbot/react'

const App = () => {
  return (
    <Standard
      mozbot="lead-generation-copy-3luzm6b"
      style={{ width: '100%', height: '600px' }}
    />
  )
}
```

Este código está creando un contenedor con un ancho del 100% (coincidirá con el ancho del padre) y una altura de 600px.

## Popup

```tsx
import { Popup } from '@mozbot/react'

const App = () => {
  return <Popup mozbot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
}
```

Este código activará automáticamente la ventana emergente después de 3 segundos.

## Burbuja

```tsx
import { Bubble } from '@mozbot/react'

const App = () => {
  return (
    <Bubble
      mozbot="lead-generation-copy-3luzm6b"
      previewMessage={{
        message: '¡Tengo una pregunta para ti!',
        autoShowDelay: 5000,
        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
      }}
      theme={{
        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
      }}
    />
  )
}
```

Este código mostrará la burbuja y permitirá que aparezca un mensaje de vista previa después de 5 segundos.

## Configuración adicional

Puedes prellenar los valores de las variables del bot en tu código incrustado añadiendo la opción `prefilledVariables`. Aquí tienes un ejemplo:

```tsx
import { Standard } from '@mozbot/react'

const App = () => {
  return (
    <Standard
      mozbot="lead-generation-copy-3luzm6b"
      style={{ width: '100%', height: '600px' }}
      prefilledVariables={{
        'Current URL': 'https://my-site/account',
        'User name': 'John Doe',
      }}
    />
  )
}
```

Prefillará la variable `Current URL` con "[https://my-site/account](https://my-site/account)" y la variable `User name` con "John Doe". Más información sobre variables: [aquí](/editor/variables).

Ten en cuenta que si la URL de tu sitio contiene parámetros de consulta (por ejemplo, [https://mozbot?User%20name=John%20Doe](https://mozbot?User%20name=John%20Doe)), las variables se inyectarán automáticamente en el mozbot. Así que no necesitas transferir manualmente los parámetros de consulta a la configuración de incrustación del bot.