Microsoft Bot Framework WebChat: Add bot image

Question

How to add image of the bot with some welcome text in the middle in Microsoft Bot Framework Web Chat. Seems like quite common functionality and I see images which indicates that is possible.

Anyone knows how to add it?

Answer 1

you can use the below code and replace your image path to give response from bot to user including text and image.

await context.PostAsync("Here we go with the welcome message\n"+"![AN IMAGE!](Your_Image_URL)");

Another way is, you can also use Card functionality:

private async Task Greeting(IDialogContext context, IAwaitable<IMessageActivity> argument)
        {
            var message = await argument;
            if (string.IsNullOrEmpty(message.Text))
            {

                // Hero Card
                var cardMsg = context.MakeMessage();
                var attachment = BotWelcomeCard("Hello,I am a bot.", "");
                cardMsg.Attachments.Add(attachment);
                await context.PostAsync(cardMsg);

            }
            else
            {             
               // else code
            }
        }


 private static Attachment BotWelcomeCard(string responseFromQNAMaker, string userQuery)
        {
            var heroCard = new HeroCard
            {
                Title = userQuery,
                Subtitle = "",
                Text = responseFromQNAMaker,
                Images = new List<CardImage> { new CardImage("../img/bot.gif") },
                Buttons = new List<CardAction> { new CardAction(ActionTypes.ImBack, "Show Menu", value: "Show Bot Menu") }
            };

            return heroCard.ToAttachment();
        } 

Answer 2

ok, here is what we end up doing:

<script>
    $(document).ready(function () {
        $(".wc-header").append("<div class='wc-header-welcome'><img src='/Images/bot.png'/><div>Hello! I am your bot</div>");
    });
</script>

Hope it will help save time to someone else.