Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

391
Views
Adaptive dialog in WhatsApp chatbot and other channels

Hi we are developing chatbots using bot framework and integrating with multiple channels like WhatsApp, Google business messages, Facebook, web, line etc. We were using waterfall dialog before and now we are moving to adaptive dialogs. Can someone help me how to define the list, buttons everything that whatsApp or other channels support in the adaptive dialog lg file. In documentation samples only default cards everything were shown. We are using node js for development and botframework V4.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Note: if you’re building a bot in Node.js then you need to use adaptivecards

Import the module

// Import the module:
import * as AdaptiveCards from "adaptivecards";

// OR require it:
var AdaptiveCards = require("adaptivecards");

// OR if you loaded via CDN, the global "AdaptiveCards" variable
// is already defined and can be used directly

Render a card

// Author a card
// In practice you'll probably get this from a service
// see http://adaptivecards.io/samples/ for inspiration
var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "https://adaptivecards.io/content/adaptive-card-50.png"
        },
        {
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": "https://github.com/Microsoft/AdaptiveCards"
        }
    ]
};

// Create an AdaptiveCard instance
var adaptiveCard = new AdaptiveCards.AdaptiveCard();

// Set its hostConfig property unless you want to use the default Host Config
// Host Config defines the style and behavior of a card
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
    // More host config options
});

// Set the adaptive card's event handlers. onExecuteAction is invoked
// whenever an action is clicked in the card
adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }

// Parse the card payload
adaptiveCard.parse(card);

// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page:
document.body.appendChild(renderedCard);

You can refer to Using Adaptive Cards with the Microsoft Bot Framework, Introducing Bot Framework Adaptive Dialogue, and Adaptive dialogs with Bot framework skills sample

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!