none
Welcome card doesnot pop up on its own while integrating it with direct line channel RRS feed

  • Question

  • I have created a bot locally using bot framework v4 c#. It has a welcome card that automatically pops up as soon I connect my local url with emulator, but recently I deployed my bot on azure and integrated it using direct line channel in my website. Now whenever I click, it opens the bot but the welcome card does not come on its own ,it appears when I write something from my chatbot. I just want the welcome card to appaer automatically as it appears in the emulator. Guys can you help me out please? Below is the code of direct line which I am integrating in my website.

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- Paste line 7 to 27 after the title tag in _Layout.cshtml -->
        <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" 
        />
        <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
        <style>
            #mychat {
                margin: 10px;
                ;
                bottom: 30px;
                left: 10px;
                z-index: 1000000;
            }

            .botIcon {
                float: left !important;
                border-radius: 50%;
            }

            .userIcon {
                float: right !important;
                border-radius: 50%;
            }
        </style>
        </head>
        < body>
        <!-- Paste line from 31 to 33 before the </body> tag at the end of code -->
        <div id="container">
            <img id="mychat" src=""/>
        </div>
        </body>
       </html>

        <!-- Paste line 38 to 88 after the </html> tag -->
        <script>
        (function () {
            var div = document.createElement("div");

            var user = {
                        id: "",
                        name: ''
                    };
                    
            var bot = {
                        id: '',
                        name: 'SaathiBot'
                    };

            const botConnection = new BotChat.DirectLine({
                        
                        secret: '',
                        
                        webSocket: false 
                    })        

            document.getElementsByTagName('body')[0].appendChild(div);
            
            div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: 
        fixed; bottom: 0; left:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; 
       ; cursor: pointer;'></div></div>";
            
            BotChat.App({
                        botConnection: botConnection, 
                        user: user,
                        bot: bot 
                    }, document.getElementById("botDiv"));

            document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
            document.querySelector('body').addEventListener('click', function (e) {
                e.target.matches = e.target.matches || e.target.msMatchesSelector;
                if (e.target.matches('#chatbotheader')) {
                    var botDiv = document.querySelector('#botDiv');

                    botDiv.style.height = "0px";

                    document.getElementById("mychat").style.display = "block";
                };
            });

            document.getElementById("mychat").addEventListener("click", function (e) {

                document.getElementById("botDiv").style.height = '500px';

                e.target.style.display = "none";
            })
            }());
         </script>

    Also here is my welcome card code in  c#


        namespace Microsoft.BotBuilderSamples
        {
        public class WelcomeUser : SaathiDialogBot<MainDialog>
        {
            
            protected readonly string[] _cards =
            {
                Path.Combine(".", "Resources", "WelcomeCard.json"),
               
            };

            public WelcomeUser(ConversationState conversationState, UserState userState, MainDialog dialog, ILogger<SaathiDialogBot<MainDialog>> logger)
                : base(conversationState, userState, dialog, logger)
            {
            }

            protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
            {
                await SendWelcomeMessageAsync(turnContext, cancellationToken);
                Random r = new Random();
                var cardAttachment = CreateAdaptiveCardAttachment(_cards[r.Next(_cards.Length)]);
                await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);
            }


            private static async Task SendWelcomeMessageAsync(ITurnContext turnContext, CancellationToken cancellationToken)
            {
                foreach (var member in turnContext.Activity.MembersAdded)
                {
                    if (member.Id != turnContext.Activity.Recipient.Id)
                    {

                        if (DateTime.Now.Hour < 12)
                        {

                            await turnContext.SendActivityAsync(
                                $"Hi,Good Morning {member.Name}",
                                cancellationToken: cancellationToken);

                        }
                        else if (DateTime.Now.Hour < 17)
                        {

                            await turnContext.SendActivityAsync(
                                $"Hi,Good Afternoon {member.Name}",
                                cancellationToken: cancellationToken);
                        }
                        else
                        {

                            await turnContext.SendActivityAsync(
                                $"Hi,Good Evening {member.Name}",
                                cancellationToken: cancellationToken);


                        }
                    }
                }

            }
            private static Attachment CreateAdaptiveCardAttachment(string filePath)
            {
                var adaptiveCardJson = File.ReadAllText(filePath);
                var adaptiveCardAttachment = new Attachment()
                {
                    ContentType = "application/vnd.microsoft.card.adaptive",
                    Content = JsonConvert.DeserializeObject(adaptiveCardJson),
                };
                return adaptiveCardAttachment;
            }
            }
        }

    Here the saathiDialog code which inherited in welcome card. These are the two files inside my bot folder

        namespace Microsoft.BotBuilderSamples
        {
        public class SaathiDialogBot<T> : ActivityHandler where T : Dialog
        {
            protected readonly BotState ConversationState;
            protected readonly Dialog Dialog;
            protected readonly ILogger Logger;
            protected readonly BotState UserState;
            private DialogSet Dialogs { get; set; }

            public SaathiDialogBot(ConversationState conversationState, UserState userState, T dialog, ILogger<SaathiDialogBot<T>> logger)
            {
                ConversationState = conversationState;
                UserState = userState;
                Dialog = dialog;
                Logger = logger;
            }

            public override async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
            {
                var activity = turnContext.Activity;

                if (string.IsNullOrWhiteSpace(activity.Text) && activity.Value != null)
                {
                    activity.Text = JsonConvert.SerializeObject(activity.Value);
                }
                if (turnContext.Activity.Text == "Yes")
                {

                    await turnContext.SendActivityAsync($"Good bye. I will be here if you need me. ", cancellationToken: cancellationToken);
                    await turnContext.SendActivityAsync($"Say Hi to wake me up.", cancellationToken: cancellationToken);
                }
                else
                {
                    await base.OnTurnAsync(turnContext, cancellationToken);
                }
                await ConversationState.SaveChangesAsync(turnContext, false, cancellationToken);
                await UserState.SaveChangesAsync(turnContext, false, cancellationToken);
            }

            protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
                {
                    Logger.LogInformation("Running dialog with Message Activity.");
                    await Dialog.RunAsync(turnContext, ConversationState.CreateProperty<DialogState>(nameof(DialogState)), cancellationToken);
                }
               
         }
        }

        

    Wednesday, December 11, 2019 3:08 AM