Skip to main content

​
Estándar

Puedes obtener el código estándar de HTML y Javascript haciendo clic en el botón “HTML y Javascript” en la pestaña “Compartir” de tu mozbot. Allí, puedes cambiar las dimensiones del contenedor. Aquí tienes un ejemplo de código: 
<script type="module">
  import Mozbot from 'https://cdn.jsdelivr.net/npm/@mozbot/[email protected]/dist/web.js'

  Mozbot.initStandard({
    mozbot: 'my-mozbot',
  })
</script>

<mozbot-standard style="width: 100%; height: 600px; "></mozbot-standard>
Este código está creando un contenedor con un ancho del 100% (coincidirá con el ancho del padre) y una altura de 600px.

​
Múltiples bots

Si tienes diferentes bots en la misma página, tendrás que diferenciarlos con una propiedad id adicional: 
<script type="module">
  import Mozbot from 'https://cdn.jsdelivr.net/npm/@mozbot/[email protected]/dist/web.js'

  Mozbot.initStandard({
    id: 'bot1'
    mozbot: 'my-mozbot',
  })

  Mozbot.initStandard({
    id: 'bot2'
    mozbot: 'my-mozbot-2',
  })
</script>

<mozbot-standard
  id="bot1"
  style="width: 100%; height: 600px; "
></mozbot-standard>
...
<mozbot-standard
  id="bot2"
  style="width: 100%; height: 600px; "
></mozbot-standard>
Puedes obtener el código HTML y Javascript para el popup haciendo clic en el botón “HTML y Javascript” en la pestaña “Compartir” de tu mozbot. Aquí tienes un ejemplo: 
<script type="module">
  import Mozbot from 'https://cdn.jsdelivr.net/npm/@mozbot.io/[email protected]/dist/web.js'

  Mozbot.initPopup({
    mozbot: 'my-mozbot',
    apiHost: 'http://localhost:3001',
    autoShowDelay: 3000,
  })
</script>
This code will automatically trigger the popup window after 3 seconds.

​
Bubble

You can get the bubble HTML and Javascript code by clicking on the “HTML & Javascript” button in the “Share” tab of your mozbot. Here is an example: 
<script type="module">
  import Mozbot from 'https://cdn.jsdelivr.net/npm/@mozbot.io/[email protected]/dist/web.js'

  Mozbot.initBubble({
    mozbot: 'my-mozbot',
    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' },
      chatWindow: { backgroundColor: '#ffffff', maxWidth: '100%' },
    },
  })
</script>
Este código mostrará la burbuja y permitirá que aparezca un mensaje de vista previa después de 5 segundos.

​
Posición personalizada del botón

Puedes mover el botón con algo de CSS personalizado en tu sitio web. Por ejemplo, puedes colocar el botón de la burbuja más arriba con el siguiente CSS: 
mozbot-bubble::part(button) {
  bottom: 60px;
}

mozbot-bubble::part(bot) {
  bottom: 140px;
  height: calc(100% - 140px)
}
Si tienes un mensaje de vista previa, también tendrás que posicionarlo manualmente: 
mozbot-bubble::part(preview-message) {
  bottom: 140px;
}

​
Comandos

Aquí están los comandos que puedes usar para activar tu mozbot incrustado:
  • Mozbot.open(): Abrir popup o burbuja
  • Mozbot.close(): Cerrar popup o burbuja
  • Mozbot.toggle(): Alternar el estado abierto/cerrado de la burbuja o popup
  • Mozbot.showPreviewMessage(): Mostrar mensaje de vista previa desde la burbuja
  • Mozbot.hidePreviewMessage(): Ocultar mensaje de vista previa desde la burbuja
  • Mozbot.setPrefilledVariables(...): Establecer variables predefinidas. Ejemplo: 
    Mozbot.setPrefilledVariables({
  Name: 'Jhon',
  Email: '[email protected]',
})
    Para más información, consulta Configuración adicional.
  • Mozbot.setInputValue(...): Establecer el valor en el campo de entrada actualmente mostrado.
Puedes vincular estos comandos a un elemento de botón, por ejemplo: 
<button onclick="Mozbot.open()">Contactanos</button>

​
Callbacks

Si necesitas activar eventos en tu sitio web principal cuando el usuario interactúe con el bot, puedes usar los siguientes callbacks: 
Mozbot.initStandard({
  mozbot: 'my-mozbot',
  onNewInputBlock: (inputBlock) => {
    console.log('Nuevo bloque de entrada mostrado', inputBlock.id)
  },
  onAnswer: (answer) => {
    console.log('Respuesta recibida', answer.message, answer.blockId)
  },
  onInit: () => {
    console.log('Bot inicializado')
  },
  onEnd: () => {
    console.log('Bot terminado')
  },
})

​
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: 
Mozbot.initStandard({
  mozbot: 'my-mozbot',
  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.io?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.