E-commerce Bot | Part 6 | Create a Welcome Menu using Adaptive Card

In this bot series, we will create an E-commerce bot for one of the Online Chocolate Store “Naami Chocos“. This bot will have the following functionalities –

  1. Authentication
  2. Add to Cart
  3. Payment Integration
  4. FAQs using QnA Maker
  5. Connect the bot to the Facebook page

In this part, we will create a menu that will be shown to the users when they successfully authenticate. This menu will have the following buttons –

  1. View Products
  2. View Cart
  3. Place Order
  4. My Orders


We will create this menu using an Adaptive card. This menu will be in the loop after the finish of the MainDialog. Add the piece in IntroStepAsync in MainDialog.cs file.

private async Task<DialogTurnResult> IntroStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
            UserProfile userProfile = await _stateService.UserProfileAccessor.GetAsync(stepContext.Context, () => new UserProfile());

            if (userProfile.EmailVerified)
                List<string> operationList = new List<string> { "View Products", "View Cart", "Place Order", "My Orders" };

                // Create card
                var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
                    // Use LINQ to turn the choices into submit actions
                    Actions = operationList.Select(choice => new AdaptiveSubmitAction
                        Title = choice,
                        Data = choice,  // This will be a string
                // Prompt
                return await stepContext.PromptAsync(nameof(ChoicePrompt), new PromptOptions
                    Prompt = (Activity)MessageFactory.Attachment(new Attachment
                        ContentType = AdaptiveCard.ContentType,
                        // Convert the AdaptiveCard to a JObject
                        Content = JObject.FromObject(card),
                    Choices = ChoiceFactory.ToChoices(operationList),
                    // Don't render the choices outside the card
                    Style = ListStyle.None,
                await stepContext.Context.SendActivityAsync(MessageFactory.Text("Your email is not verified, you cannot use the services of this bot."), cancellationToken);
                return await stepContext.BeginDialogAsync(nameof(EmailAuthenticationDialog), null, cancellationToken);

Make sure to install the following Nuget package and import the necessary packages.

Add the following import statements to MainDialog.cs.

using AdaptiveCards;
using Microsoft.Bot.Builder;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Builder.Dialogs.Choices;
using Microsoft.Bot.Schema;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using NaamiChocosBot.Dialogs.Operations;
using NaamiChocosBot.Models;
using NaamiChocosBot.Services;
using NaamiChocosBot.Utilities;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

Add Choice Prompt Dialog in the construsctor.

AddDialog(new ChoicePrompt(nameof(ChoicePrompt)));

In the next part, we will implement the View Products dialog and ask the user to Add the products in the cart.

Thank you All!!! Hope you find this useful.

Leave a Reply

Up ↑

%d bloggers like this: