Skip to main content

​
Instalar

npm install @mozbot/js @mozbot/react

​
Estándar

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

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: 
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” y la variable User name con “John Doe”. Más información sobre variables: aquí. Ten en cuenta que si la URL de tu sitio contiene parámetros de consulta (por ejemplo, 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.