CODEWITHSUNDEEP
javascriptnode.jsbotframework
Alex P
Alex P

Reputation: 45

Microsoft BotFramework - Suggested Cards

So I'm trying to use suggested cards to give a nicer button input for a WebChat bot unless anyone has any other suggestions? Have currently got the builder.prompts working.

but my issue is, using the following example:

var msg = new builder.Message(session)
    .text("Thank you for expressing interest in our premium golf shirt! What color of shirt would you like?")
    .suggestedActions(
        builder.SuggestedActions.create(
                session, [
                    builder.CardAction.imBack(session, "productId=1&color=green", "Green"),
                    builder.CardAction.imBack(session, "productId=1&color=blue", "Blue"),
                    builder.CardAction.imBack(session, "productId=1&color=red", "Red")
                ]
            ));
session.send(msg);

How do I actually get the response? It auto-writes the users value into the chat (which I'm trying to avoid) Have tried using response.entity etc but nothing returns it.

The documentation says "When the user taps one of the suggested actions, the bot will receive a message from the user that contains the value of the corresponding action."

Thanks.

Upvotes: 2

Views: 479

Answers (1)

user8086575
user8086575

Reputation:

A couple things for this.

First, imBack basically stands for IM back, or instant message back. It will send the response to the conversation. You want postBack, which will hide the response, but bear in mind that for some channels postBack will map to imBack, so you'll have to do some investigating. For the Bot Emulator, postBack will hide the response.

For the second thing, if you watch your console when the bot is running, you'll see that the bot will try to route to that value in the imBack method. You'll want to capture this through a dialog or intent. Here's a small, probably inefficient example:

intents.matches(/^suggest/i, [(session) => {
    var msg = new builder.Message(session)
        .text("Thank you for expressing interest in our premium golf shirt! What color of shirt would you like?")
        .suggestedActions(
            builder.SuggestedActions.create(
                    session, [
                        builder.CardAction.postBack(session, "productId=1&color=green", "Green"),
                        builder.CardAction.postBack(session, "productId=1&color=blue", "Blue"),
                        builder.CardAction.postBack(session, "productId=1&color=red", "Red")
                    ]
                ));
        session.send(msg);
}]);

intents.matches(/^productId/i, [
    (session, args, next) => {
        console.log(args);
    }
]);

In the example above that is using intent dialogs, I can access the value from the matched array that is in the args of the second intent.matches method call.

There are other ways you can do this, but this is a quick-and-dirty example.

Upvotes: 4

Related Questions