Keeping some button always present in the BOT

Question

I have a scenario where I want my help and the main menu button is always present which comes with a welcome message and even if I am in between some other activity within the bot I can come and click on that button any time in the bot. Please suggest anyway how to achieve this scenario. This means they should always be present there.

Answer 1

If you look over the 04.api/d.post-activity-event sample, it shows you how you can add a button to a hosted page that interacts with the embedded Web Chat client (i.e. the bot).

How you decide to design the button has no bearing on the functionality you attach to it. So, whether it is a plain button or a hamburger menu, when the button is clicked, using the design demonstrated in the sample, the result will be the same.

This sample uses the React flavor of the Web Chat component and shows the React method for implementing this. This is not a React project, so don't let that stop you.

However, if you don't want to use React methods, you can achieve the same by use of an event listener.

First, get the button element. Then attach an event listener that responds to a 'click'. Make sure the event listener is placed in your page where Web Chat's store object is accessible.

Here is an example implementing the store. However, all you will need is what is shown below in the code.

At this point, assuming everything is aligned correctly, when the button is clicked a message will be sent via Web Chat to the bot. If you want to explore other Web Chat actions, you can find a list of them here. The samples provided in the Web Chat repo demonstrate how many of the actions can be implemented, if you are unsure.

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

[...]

const button = document.getElementById('sendMsgBtn');

button.addEventListener('click', (e) -> {
  e.preventDefault();
  store.dispatch({
    type: 'WEB_CHAT/SEND_MESSAGE',
    payload: {
      text: 'I pressed a button!'
    }
  });
});

On the off-chance you are wanting the button to live within the Web Chat transcript window, you can do so following the steps listed in this SO post. Again, for clarity, where the button lives and what it looks like doesn't matter. The functionality will be the same.

Hope of help!