Using botframework V4 - NodeJS - React Webchat V4
I am trying to send a message to bot, similar to a button click event in adaptive card. whenever a button is clicked in adaptive card i can see an event similar to below getting generated in the webchat
type: 'WEB_CHAT/SEND_POST_BACK',
payload: { value: {mytext: "myvalue"} }
Tried to send below dispatch message from the webchat on a custom button click, most of the time it is working and sometimes it wont send the message to bot. So i would like to know if this is the right approach or not. I can use WEB_CHAT/SEND_MESSAGE similar to below example
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/04.api/d.post-activity-event
but this is displaying the message on the chat window, i don't want to display the message that is sent to bot in my chat window.
this.store.dispatch({
type: 'WEB_CHAT/SEND_POST_BACK',
payload: { value: {buttonClick: "mytext", scanText: myvalue} }
});
Related
I am trying to implement messageBack feature of Adaptive Card in Slack Builder Kit where on clicking of a button I can show a default response of the bot before the response comes from the API. This could be implemented in Adaptive Card using messageBack. Is there a way to do similar thing in Slack Builder Kit template.
On clicking the button, I want to show 'Thank you for clicking' and then I want to show the response which comes from the API.
When the button is clicked, you can update the message that you sent with "Thank you for clicking" using the chat.update method. After that, you could update it once more to show the response from the API or just send another message via chat.postMessage.
Alternatively, you could send an ephemeral message with the text "Thank you for clicking" using the chat.postEphemeral method, which would only show up for the user that clicked the button and then send a regular message with the API contents in a later message.
I’m using hlatki01/botpress-connector to connect RocketChat to my botpress bot. It’s working fine. However, visitors have to type something into the livechat widget to trigger an initial bot response. I’d prefer the bot agent to start the conversation as soon as the widget is opened. The botpress docs say the way to do this is by sending a botpress event from the page:
window.botpressWebChat.sendEvent({
type: "proactive-trigger",
channel: "web",
payload: {
text: "fake message",
},
})
... and catching the event in a botpress before_incoming_middleware hook.
However, I’m not embedding botpress on the page - I don’t have window.botpressWebChat. I’m a bit stuck - how can I trigger some sort of event when the livechat widget is opened, so that the botpress agent receives it and can greet the visitor?
How is this class used? If there is a submit button using Action.Submit on an adaptive card, how does the Microsoft Bot get this message?
So this question doesn't get flagged as too generic, there is a Webex adapter connected to a Microsoft bot using this exact demo.
https://learn.microsoft.com/en-us/azure/bot-service/bot-service-adapter-connect-webex?view=azure-bot-service-4.0
The OnMessageActivityAsync message gets the message from the bot, for example, if the user types "Hello", and the bot responds back with an adaptive card that has the action "Action.Submit" that will give the user a card with a submit button. Now, if the user clicks "submit", Webex should send something back to the bot. I don't think it's a message, because I never receive a message. Webex has, on it's side of documentation, a webhook with ActionAttachments. But after creating this webhook and clicking submit, what is the bot supposed to receive?
The answer to this was to change the Webex access token from the auto-generated token to the bot's access token. After doing this, the Action Attachment was working and the bot received the Event Activity.
We have a Angular application with .Net core.
When the users type on the input from their web page form field, it will need to be passed to the Microsoft BOT framework.
The response message from the BOT service will need to be displayed back to the Bot Chat client.
Users will review the above response and have the ability to send the received data from Bot Client back to the web page form fields.
I have read about the Web chat client and the Direct Line bot.
I can use Web chat client but I am not sure how to pass the input from my web form to it as I don't want the user to open the web chat to enter the same data again.
If I use the Direct Line Bot, I have control on passing the form input to the Bot service. In this case, I will need to spend time to build the Web client to display and process the messages.
You can do this by utilizing the DirectLine connection instance that you give to the WebChat control when you create it. The connection instance will enable you to both send events into the bot as well as watch for events coming out of the connection. At the same time, since you're sharing the connection with the chat control, the chat control can perform its typical duties of sending and receiving/displaying message contents.
For example, when the user clicks on the submit button on your form, you would utilize the connection object to send an event that contains your payload like so:
Setup DirectLine connection
Create the DirectLine connection at start up and assign it to your WebChat control, but also hold onto the connection object in a variable you can utilize in other places such as the form button click.
const directLineToken = await getDirectLineToken();
const directLineConnection = createDirectLine({ directLineToken });
Form button click logic
In the form button click logic you can now send an event activity that represents your proprietary backchannel event to the bot containing the form details as the payload:
const fancyFormEventPayload = {
fieldA: fieldAFormElement.value,
fieldB: fieldBFormElement.value,
// etc
};
// NOTE: this returns an observable that you can wait on
// to watch for errors or know when it has completed. I'm
// just using fire and forget here for now
directLineConnection.postActivity({
type: "event",
name: "myFancyFormSubmitted",
value: fancyFormEventPayload,
});
Listening for events coming back
Now the bot might respond with some message activities which the WebChat would then display, but it could also send back an event activity that contains the updated form payload which you could watch for and grab to populate the form with the updated values if they say "yes" for that.
// The connection exposes the stream of incoming activities via Rx, so
// we create filtered subscription that will process only the activity
// we're interested in and update the form fields in response to that
directLineConnection.activity$
.filter(activity => activity.type === 'event' && activity.name === 'myFancyFormUpdate')
.subscribe(activity =>
{
const myFancyFormPayload = activity.value;
fieldAFormElement.value = myFancyFormPayload.fieldA;
fieldBFormElement.value = myFancyFormPayload.fieldB;
// etc
});
In Facebook messenger, buttons (on the cards as well), can send a custom payload, along with the text of the button which was clicked. This payload is available in the sourceEvent section of the message. Also this payload has to be added in the sourceEvent manually. There is no official Bot framework API available for doing this.
This is a sample payload on FB button
https://developers.facebook.com/docs/messenger-platform/send-api-reference/button-template
My Chatbot also supports Webchat. Does Webchat supports sending such payload to the bot? Right now all I get is the text of the button clicked.