Skip to content

Latest commit

 

History

History
 
 

06.using-cards

README.md

using cards

Bot Framework v4 using cards bot sample

This sample shows how to create a bot that uses rich cards.

Prerequisites

  • [Node.js][4] version 8.5 or higher
# determine node version
node --version

To try this sample

  • Clone the repository 
    git clone https://github.com/microsoft/botbuilder-samples.git
  • In a terminal, navigate to samples/javascript_nodejs/06.using-cards 
    cd samples/javascript_nodejs/06.using-cards
  • Install modules 
    npm install
  • Start the bot 
    npm start

Testing the bot using Bot Framework Emulator v4

Microsoft Bot Framework Emulator is a desktop application that allows bot developers to test and debug their bots on localhost or running remotely through a tunnel.

  • Install the Bot Framework emulator from here

Connect to bot using Bot Framework Emulator v4

  • Launch Bot Framework Emulator
  • File -> Open Bot Configuration and navigate to samples/javascript_nodejs/06.using-cards folder
  • Select using-cards.bot file

Rich Cards

A key to good bot design is to send interactive media, such as Rich Cards. There are several different types of Rich Cards, which are as follows:

  • Animation Card
  • Audio Card
  • Hero Card
  • Receipt Card
  • Sign In Card
  • Thumbnail Card
  • Video Card

When designing the user experience developers should consider adding visual elements such as Rich Cards.

Deploy this bot to Azure

You can use the MSBot Bot Builder CLI tool to clone and configure any services this sample depends on. In order to install this and other tools, you can read Installing CLI Tools.

To clone this bot, run

msbot clone services -f deploymentScripts/msbotClone -n <BOT-NAME> -l <Azure-location> --subscriptionId <Azure-subscription-id> --appId <YOUR APP ID> --appSecret <YOUR APP SECRET PASSWORD>

NOTE: You can obtain your appId and appSecret at the Microsoft's Application Registration Portal

Further reading