Exit Event / Welcome Event Not Firing

Question

We're trying to get some events/messages to post when a user exits a chatbot window (or the site) (or a welcome message), but so far the events are not firing.

I can see within Inspector tools:

Screen Shot 2020-02-18 at 3 15 39 PM

Various activities/conversations are created, the chatbot works, but no welcome/exit events are triggered.

The code we're using is nearly if not identical to documentation code here: https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/WELCOME_MESSAGE.md

and here: How to handle user leaving conversation

I have a function that fires when the window is closed, as follows:

    const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
    return next( action );});      

        window.addEventListener( 'sendEventActivity', ( { data } ) => {

          store.dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
              name: 'user_event',
              value: {
                name: 'end_conversation',
                value: 'user ended conversation'
              },
              text: 'The user has left the conversation.'
            }
          })

        });

        function exitEvent(){
          const eventSendActivity = new Event( 'sendEventActivity' );
          eventSendActivity.data = 'User left conversation';
          window.dispatchEvent( eventSendActivity );
          console.log('Exit Event Submitted (hopefully)');
        }
        exitEvent();

I have tried other variations, defining the store earlier, above render chat, after render chat, sending welcome messages from various locations and at various times but can't seem to get it to send.

We are using https://cdn.botframework.com/botframework-webchat/latest/webchat.js

Any idea what the issue might be? Not sure where we are going wrong or why it's not firing - copying in theory known to be working code straight into our code doesn't seem to do the trick.

Thanks in advance and please let me know if I have failed to include any necessary details- new to chatbot and do not post much on github. Many thanks,

EDIT:

I was able to marry the aforementioned code and code from here: https://github.com/microsoft/BotFramework-WebChat/issues/2120#issuecomment-516056614 in order to achieve what I wanted. I'll post below in case it helps anyone else...

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
               dispatch({
                  type: 'WEB_CHAT/SEND_EVENT',
                  payload: {
                     name: 'webchat/join'
                  }
               });
            }
            return next(action);
         });

          window.addEventListener( 'sendEventActivity', ( { data } ) => {

          store.dispatch( {
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                 name: 'webchat/exit'
              }
            } );
          } );

          document.getElementById("action_menu_btn").addEventListener( 'click', function() {
            const eventSendActivity = new Event( 'sendEventActivity' );
            eventSendActivity.data = 'User left conversation';
            window.dispatchEvent( eventSendActivity );
            console.log('End Converstaion Event Fired');
          });

Cheers!

Answer 1

I failed to mention this in the other post (I'll update it), but the reason the code works is because of the window.onbeforeunload() function. Without it, the window closes before any code can finish executing. The result being no event is created, is caught by a listener, nor is sent via the Web Chat store to the bot.

Here, using the above, refreshing the page produces the "User left conversation" activity.

---

Also, something to note, any function you create and pass thru like you have with exitEvent() is going to run as soon as the page loads. Take the following code which gets the user's location via the browser (placed just before the closing </script> tag). As you can see, it's loading even before Web Chat. If you are wanting a function to run according to some activity passed from the bot, then utilize either the store's actions (i.e. DIRECT_LINE/INCOMING_ACTIVITY, or some other) or via the available middleware.

let geoLoc = async () => {
  await navigator.geolocation.getCurrentPosition(position => {
    console.log('Latitude: ', position.coords.latitude);
    console.log('Longitude: ', position.coords.longitude);
  });
}

geoLoc();

---

Regarding a welcome message, you have two options. Either send as an activity from your bot (reference this sample) or initiate an event on your page after some initial activity is received (reference this sample).

Lastly, I would recommend getting the code working as-is before tinkering with it. This usually trips me up, so thought I'd pass it along.

Hope of help!