Skip to content

Files

Latest commit

sw-joelmutgermanandu
sw-joelmut
and
germanandu
Update samples to support Node 22 version - Typescript (#4033)
Mar 4, 2025
49287f4 · Mar 4, 2025

History

History

06.using-cards

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
deploymentScripts
deploymentScripts
Jan 21, 2020
deploymentTemplates
deploymentTemplates
Mar 4, 2025
src
src
Sep 25, 2024
.env
.env
Nov 16, 2021
.eslintrc.js
.eslintrc.js
May 13, 2024
README.md
README.md
Sep 25, 2024
package.json
package.json
Sep 25, 2024
tsconfig.json
tsconfig.json
Mar 4, 2025

README.md

Using-Cards

Bot Framework v4 using cards bot sample

This bot has been created using [Microsoft Bot Framework][1], it shows how to create a bot that uses rich cards to enhance your bot design.

Prerequisites

  • Node.js version 18 or higher

    # determine node version
node -v

To try this sample

  • Clone the repository

    git clone https://github.com/microsoft/botbuilder-samples.git

  • In a terminal, navigate to samples/typescript_nodejs/06.using-cards

    cd samples/typescript_nodejs/06.using-cards

  • Install modules

    npm install

  • Start the bot

    npm start

Testing the bot using Bot Framework Emulator

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 version 4.3.0 or greater from here

Connect to the bot using Bot Framework Emulator

  • Launch Bot Framework Emulator
  • File -> Open Bot
  • Enter a Bot URL of http://localhost:3978/api/messages

Rich Cards

Most channels support rich content. In this sample we explore the different types of rich cards your bot may use. 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 the bot to Azure

To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.

Further reading