Actualizado: 8/1/2025

¿Cómo integrar tu webchat a tu sitio?


Estos métodos se pueden utilizar en cualquier lugar de la web y llamarlos como una función javascript.

  • Ocultar webchat: bmHide()
  • Mostrar webchat: bmShow()
  • Minimizar Webchat: bmMinimize()
  • Maximizar Webchat: bmMaximize()
  • Información sobre Webchat: bmInfo()
  • Setear variables: bmSetVariables({“variable1”: “valor1”, “name”: “nombre actualizado”})
  • Enviar mensaje: bmSendMessage(‘mensaje a enviar’). Este mensaje será enviado automáticamente por parte del cliente.




Uso de variables en Webchat

Puedes editar las variables existentes al comienzo de una conversación Webchat.


Establecer variables

Dentro del fragmento de código utilizado para integrar webchat en tu sitio, puedes establecer variables con información externa.

Se debe agregar un nuevo objeto que contenga las variables con los valores a editar. El objeto es BOTMAKER_VAR.


<script>
    /* Aquí deben ser definidas todas las variables- */
    var BOTMAKER_VAR = {
        firstName: 'newValueForFirstName',
        lastName: 'newValueForLastName',
        customVar: 'newValueForCustomVar'
    };

    (function () {
        let js = document.createElement('script');
        js.type = 'text/javascript';
        js.async = 1;
        js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
        document.body.appendChild(js);
    })();
</script>



Puedes editar tus propias variables, como firstName y lastName, o nuevas variables. La única condición es que estas variables ya existan en el bot.  

 ¿Cómo mantener el ID de tu sistema?  

                                                                                              

 Si quieres mantener o usar un ID único o de tu sistema asociado al chat, puedes enviar ese dato en la variable userIdOnBusiness dentro de BOTMAKER_VAR 


<script>
    /* Aquí deben ser definidas todas las variables */
    var BOTMAKER_VAR = {
        userIdOnBusiness: 'myBusinessId',
        ...otherVariables
    };
    (function () {
        let js = document.createElement('script');
        js.type = 'text/javascript';
        js.async = 1;
        js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
        document.body.appendChild(js);
    })();
</script>


CÓMO DETECTAR CUANDO TERMINÓ DE CARGAR EL WEBCHAT


Para esto debes crear una variable llamada BOTMAKER_ACTION la cual tenga una función llamada onload.

Esta función será ejecutada luego de que el Webchat termine de cargar.


<script>
    /* Aquí deben ser definidas todas las variables- */
    var BOTMAKER_VAR = {
      firstName: 'newValueForFirstName',
      lastName: 'newValueForLastName',
      dni: '3432432432432'
    };

    var BOTMAKER_ACTION = {
      onload: function () {
        // ON LOAD WEBCHAT CODE
      },
    };
   
    (function () {
      let js = document.createElement('script');
      js.type = 'text/javascript';
      js.async = 1;
      js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
      document.body.appendChild(js);
    })();
  </script>


                                                                                                                

Integración en App Mobile    

                                                                                                                                                                      

Para integrar el webchat en su mobile, puede optar por:  


- Embeber el webchat en un webview. Se utiliza el mismo script que la web. Para una mejor experiencia en la mobile, es recomendable utilizar los métodos expuestos del webchat.  

Puedes encontrar ejemplos en los siguientes repositorios: https://github.com/botmaker-org/botmaker-webchat-mobile

                                                                                                                               

 - Integrarla a un chat propio de su App mobile integrando y procesando los mensajes de salida y entrada por medio de la API Botmaker.