https://discord.gg/botpress logo
Join Discord
Powered by
Understanding LIFECYLE events and sendPayload 'tim...
# 🤝help
w
Hi there. I'm trying to understand how lifecycle events work and when I am first able to use the 
botpressWebChat.sendpayload()
. Reason being, I'm trying to send an authorization token to my bot (made in the cloud studio + embedded on page) to get user related data from inside the bot, from an API. My initial thoughts were to use 
sendPayload
once the bot was loaded, like so...
Copy code
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
  window.botpressWebChat.init({
      //...config info here
  });

  window.botpressWebChat.onEvent(function () { 
    window.botpressWebChat.sendEvent({ type: 'show' });
    window.botpressWebChat.sendPayload({ type: trigger, payload: { token: 'token_string' }});  
  }, ['LIFECYCLE.LOADED']);
</script>
This did not work. 
sendPayload
also did not work outside of the 
onEvent
callback, so I assumed the issue was it was was too early in the bot's lifecycle for it to receive data. Looking at this page (https://botpress.com/docs/cloud/toolbox/events-triggers/), I assumed the next stage in the cycle after 
LIFECYLE.LOAD
, 
LIFECYLE.READY
, might be the stage in the lifecycle to attempt to issue a payload. I tried the following:
Copy code
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
  window.botpressWebChat.init({
      //...config info here
  });

  window.botpressWebChat.onEvent(function () { 
    window.botpressWebChat.sendEvent({ type: 'show' });
  }, ['LIFECYCLE.LOADED']);

  window.botpressWebChat.onEvent(function () { 
        window.botpressWebChat.sendPayload({ type: 'trigger', payload: { token: 'token_string' }});  
  }, ['LIFECYCLE.READY']);
</script>
However, doing so caused the bot to fail to show on page, as if the second event callback was over-writing or disabling the 
LIFECYCLE.LOADED
callback. I reversed the order of assigning the 
onEvent
handlers (so 
LIFECYLE.LOADED
came after 
LIFECYCLE.READY
) and this fixed the issue of the bot not showing, but still the 
LIFECYCLE.READY
callback never fired. My guess at this point is that this is a bug, or some custom, pre-load behavior that only allows 
LIFECYCLE.LOAD
callbacks to be registered? So I then tried delaying the assignment of the 
LIFECYLE.READY
handler by assigning it in a 
setTimeout
, so as not interfere with the "pre-load" state. I aimed for a timeout that triggered roughly AFTER the bot had loaded and rendered on page.
Copy code
<script>
  window.botpressWebChat.init({
   //...config info here
  });

  window.botpressWebChat.onEvent(function () { 
    console.log("LOADED!")  
    window.botpressWebChat.sendEvent({ type: 'show' })  
  }, ['LIFECYCLE.LOADED']);
</script>
<script> 
  setTimeout( function () {
    window.botpressWebChat.onEvent(function () { 
      console.log("Sending Payload...");
      window.botpressWebChat.sendPayload({ type: 'trigger', payload: { token: 'token_string' }}); 
    }, ['LIFECYCLE.READY');
  }, 3500);

</script>
But this did not work either. *My assumption at this points was "I'm either missing the 
LIFECYCLE.READY
(it occurs before my timeout expires) OR the event is never triggered OR it's an event that I need to trigger?" * Either way, after all of this, the only code that seems to work and send the token is simply removing the ready state handler, and using 
sendPayload
after some timeout.
Copy code
<script>
  window.botpressWebChat.init({
   //...config info here
  });

  window.botpressWebChat.onEvent(function () { 
    window.botpressWebChat.sendEvent({ type: 'show' })  
  }, ['LIFECYCLE.LOADED']);
</script>
<script> 
  setTimeout( function () {
      console.log("Sending Payload...");
      window.botpressWebChat.sendPayload({ type: 'trigger', payload: { token: 'token_string' }}); 
  }, 3500);

</script>
My issue with this however is that it seems 'hacky' as I'm just guessing when the bot will appear on page. I can't guarantee 3500ms is the case for all users, particularly mobile, off WIFI, and if I set a longer timeout, users will be waiting unnessicarly for the bot to function (the token I want to send is need at the very beginning. So my questions are : When is the first time I can use 
botpressWebChat.sendPayload()
? Does this time align with a any event listed here: https://botpress.com/docs/cloud/toolbox/events-triggers/ ? And, if so, how do I register a callback for that event without preventing the chat interface from showing on page? Thanks for any help in advance, and apologies if any assumptions I have made above come across as 'ignorant' above. I just thought it better to explain my problem + thinking fully so I can arrive at the correct answer quicker.
f
Hi there @wooden-painting-80124 We solved something similar to this in here https://discord.com/channels/1108396290624213082/1196468058949173268 You can look at the last message from me where its working
w
Hey @fresh-fireman-491 - yes this is similar to what I have above but in the callback, right? You're using a timeout to get around the timing issue I've mentioned above, and send the payload when the bot is "ready" to receive payloads. My issue with this "timing" problem. If the user is on mobile, with a weak reception, the payload never seems to be received, as the payload gets sent before the bot signals it's ready. Of course, I could extend the timeout, but then what about users with fast connections? There experience will involved several seconds of waiting until the data can be sent.
To me, using a timeout doesn't seem like the ideal solution. I'd like to be able to send the payload as soon as the bot is ready to receive payloads. Which feels to me like it should be the 
'LIFECYLE.READY'
event.
f
Then it wouldnt send anything before it was properly loaded
w
Do I not still run into the same issue though? I can't set a callback for the 
USER.CONNECTED
event in the init script, as I clear the "show" event from occuring. So the bot doesn't show.
Copy code
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
  window.botpressWebChat.init({
      //...config info here
  });

  window.botpressWebChat.onEvent(function () { 
    window.botpressWebChat.sendEvent({ type: 'show' });
  }, ['LIFECYCLE.LOADED']);

  window.botpressWebChat.onEvent(function () { 
        window.botpressWebChat.sendPayload({ type: 'trigger', payload: { token: 'token_string' }});  
  }, ['USER.CONNECTED']);
</script>
If I reverse the order, the 
USER.CONNECTED
event never fires, but the bot shows. So I never recieved the payload. After that, I'm back in the same situation, using a 
setTimeout
to time when to register the 
USER.CONNECTED
callback with 
onEvent
. Am I missing something?
f
window.botpressWebChat.onEvent( function (event) { if (event.type === 'LIFECYCLE.LOADED') { window.botpressWebChat.sendEvent({ type: 'show' }) } }, ['LIFECYCLE.LOADED'] ); window.botpressWebChat.onEvent( function (event) { if (event.type === 'USER.CONNECTED') { window.botpressWebChat.sendPayload({ type: 'trigger', payload: { token: 'token_string', }, }); } }, ['USER.CONNECTED'] )
Something like that
You are just writing function ()
You need function (event)
You need if (event.type === 'USER.CONNECTED')
w
Unfortunately this doesn't work. For whatever reason, all other callbacks I attempt to register, other than on the 'LIFECYCLE.LOADED' event, fail to fire and seems to remove the 'LIFECYCLE.LOADED' callback. For instance, the code you've suggested above causes the chat to never show and therefore the user to never connect. If you reverse the order of how you declare the callbacks, the 'USER.CONNECTED' event never seems to fire.
Maybe I need to look at the source code
f
This sends a payload window.botpressWebChat.onEvent( (event) => { if (event.type === 'LIFECYCLE.READY') { console.log('A new message was received!') window.botpressWebChat.sendPayload({ type: 'trigger', payload: { myCustomProperty: 'hello', }, }) } }, ['LIFECYCLE.READY'] )
w
I dug into the source code for 
inject.js
, from what I understand (and someone please say if I'm wrong), you can only assign ONE 'onEvent' call back in intial setup, before the bot has been intialized. Otherwise you overwrite the 
onEvent
handler. The workd around is nesting the 
LIFECYLE.READY
handler within the 
LIFECYLE.LOADED
handler, so that once more event handlers can be set, it is set. Working code below:
Copy code
window.botpressWebChat.onEvent(function (event) {
    if (event.type === 'LIFECYCLE.LOADED') {

      window.botpressWebChat.sendEvent({ type: 'show' });
      // console.log("LOADED!");  <- sanity check

      window.botpressWebChat.onEvent(function(event) {
          if (event.type === 'LIFECYCLE.READY') {
            //console.log("Running READY callback") <- sanity check
            window.botpressWebChat.sendPayload({
              type: 'trigger',
              payload: {
                token: 'token_string',
              },
            });
          }
        }, ['LIFECYCLE.READY']);
      
    } 
  }, ['LIFECYCLE.LOADED']);
f
Thanks a lot for sharing this and nice find. Where did you find the source code for inject.js?
w
When you run your bot on your own page, you should be able to find in the chrome dev tools, under the 'Sources' tab
f
Thanks a lot
w
You're welcome! Thanks for your help
11 Views
PreviousNext
Powered by