Submit text to BotFramework WebChat by clicking on link

Question

I have developed a chatbot with Microsoft Bot Framework and have included it in my website via DirectLine:

<div id="chatbot_body"></div>
    <script src="https://unpkg.com/botframework-webchat/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: 'here-is-my-key' },
        user: { id: 'Sie' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("chatbot_body"));
    </script>

By default the chatbot window is hidden and it appears only if the user clicks on a "Chat with the chatbot" link.

But I also want that by clicking on this link a conversation is started by the chatbot immediately. I am trying to do this with Jquery by filling out the chat input and sending it to the chatbot when the link is clicked.

$("#chatbot_link").on("click", function(){
    $("#chatbot_body").show(); // show chatbot window
    $("input.wc-shellinput").val("start"); // fill input field with 'start'
    $(".wc-console").addClass("has-text"); // add has-text class (necessary?)
    $(".wc-send").click(); // submit form by clicking wc-send
}

But this does not work. The input is not sent to the chatbot and so the chatbot does not say anything.

Any ideas what I am doing wrong here?

Thanks a lot :)

A good place to ask this may be here https://github.com/Microsoft/BotFramework-WebChat — D4RKCIDE, Aug 25 '17 at 16:04
Possible duplicate of [Bot framework get the ServiceUrl of embedded chat control page](https://stackoverflow.com/questions/42825048/bot-framework-get-the-serviceurl-of-embedded-chat-control-page) — Ezequiel Jadib, Aug 28 '17 at 23:49

score 1 · Answer 1 · answered Aug 25 '17 at 23:04

It sounds like you are looking for a "welcome message" - this is a message sent from the bot to the user when they first join the chat. Example: "Welcome to Shopping Bot! I will help you keep track of your shopping list" or something describing your bot's general functionality. You can do this in Node.js by adding the following code to your bot:

// Welcome message for Node.js bot
bot.on('conversationUpdate', function (message) {
    if (message.membersAdded) {
        message.membersAdded.forEach(function (identity) {
            if (identity.id == message.address.bot.id) {
                // Bot is joining conversation
                // - For WebChat channel you'll get this on page load.
                var reply = new builder.Message()
                        .address(message.address)
                        .text("Welcome to my page");
                bot.send(reply);
            } else {
                // User is joining conversation
                // - For WebChat channel this will be sent when user sends first message.
                // - When a user joins a conversation the address.user field is often for
                //   essentially a system account so to ensure we're targeting the right 
                //   user we can tweek the address object to reference the joining user.
                // - If we wanted to send a private message to teh joining user we could
                //   delete the address.conversation field from the cloned address.
                var address = Object.create(message.address);
                address.user = identity;
                var reply = new builder.Message()
                        .address(address)
                        .text("Hello %s", identity.name);
                bot.send(reply);
            }
        });
    }
});

Source: https://gist.github.com/nwhitmont/d9910fcf7ab4048ee37bd5c789cfc375

score 1 · Answer 2 · answered Aug 28 '17 at 14:04

The answer by @Nils W is awesome. I ended up using a backchannel after all since I need it for other tasks as well. https://learn.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-backchannel has an example that fits my question pretty well, where a button is clicked an this event is sent to the bot via backchannel.

bot.on("event", function (event) {
    var msg = new builder.Message().address(event.address);
    msg.data.textLocale = "en-us";
    if (event.name === "buttonClicked") {
        msg.data.text = "I see that you clicked a button.";
    }
    bot.send(msg);
})

Submit text to BotFramework WebChat by clicking on link

2 Answers2