How to create card in messenger using API.ai (dialogflow)

Question

I am integrated dialog flow and messenger by using nodejs this is working fine for text exchange. I am confused about creating a card in messenger. Can anyone please help in this?
I have integrated the facebook messenger bot with the website. When customer visit the page that bot will provide help. I want to show the card in that bot. Please provide reference or solution for this requirement. Please see this img Like this I want to show

Answer 1

I'm assuming by messsenger, you mean Facebook Messenger?

To use a Basic Card with Google Assistant, you first must check that the screen output supports use of the card UI. You can do this with:

if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  return;
}

After you've tested whether the screen supports use of a basic card, you can create a new instance of the Basic Card class with code like:

// Create a basic card
conv.ask(new BasicCard({
  text: `This is a basic card.  Text in a basic card can include "quotes" and
  most other unicode characters including emoji 📱.  Basic cards also support
  some markdown formatting like *emphasis* or _italics_, **strong** or
  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
  things like line  \nbreaks`, // Note the two spaces before '\n' required for
                               // a line break to be rendered in the card.
  subtitle: 'This is a subtitle',
  title: 'Title: this is a title',
  buttons: new Button({
    title: 'This is a button',
    url: 'https://assistant.google.com/',
  }),
  image: new Image({
    url: 'https://example.com/image.png',
    alt: 'Image alternate text',
  }),
  display: 'CROPPED',
}));

More info is available via Google's documentation .