From the code, developers can generate cards of different typesL Basic and HTML. The Basic cards show a picture and will react to a direct touch. If the url field is present, it will pop-up a browser with the url.

HTML cards expect the content of the card to be an html string that will be rendered and drawn within the card. These cards don't react to direct touch, but developers can add buttons that will send a message to the frapp and from there the developer can do anything with it. Even pop-up a browser with a url. You can see the example in the code snippet below:

const Bot = botState => {
  let _ = botState._;
  let R = botState.R;
  let D = botState.developer;
  D.runProfile = Developer.DEV();

  const MESSAGE = "Pop-up";
  const flight1HTML = `<div class="card" style="width: 16.5rem;text-align: justify;" onclick="show()">
<img src="https://i2.wp.com/kashmirobserver.net/wp-content/uploads/2020/04/EVTic79XsAEnqtY.jpeg?fit=621%2C680&ssl=1&resize=1280%2C720.jpg"; class="card-img-top" style="width:100%; height:200px; object-fit:cover;">
<div class="card-body">
<h5 class="card-title">Provide nutritious meals to the poor and needy people. Donating groceries can help end the hunger of poor and needy people.</h5>
      <input
        type="button"
        id=${MESSAGE}
        style="border-style: none; background-color: #00BDF2; border-radius: 0.5rem; width: 5.5rem; color:#ffffff; font-size: 1rem; cursor: pointer;"
        value=${MESSAGE}
      />
</div>
</div>`;

  const flightHtmlCardsData = [
    {
      html: flight1HTML,
    },
  ];

  let htmlCardsObj = new Cards(botState.getUniqueId(), {
    type: 'html',
    size: 3,
    popup: true
  });

  let googleCard = new Card(botState.getUniqueId(), {
    title: 'Google',
    description: 'Provide nutritious meals to the poor and needy people. Donating groceries can help end the hunger of poor and needy people.',
    pictureUrl: 'https://i2.wp.com/kashmirobserver.net/wp-content/uploads/2020/04/EVTic79XsAEnqtY.jpeg?fit=621%2C680&ssl=1&resize=1280%2C720.jpg',
    url: 'https://google.com'
  });

  let webCardsObj = new Cards(botState.getUniqueId(), {
    type: 'basic',
    size: 1,
    popup: true,
  });

  function myFun() {
    const htmlCards = [];
    for (let i = 0; i < flightHtmlCardsData.length; i++) {
      htmlCards.push(new Card(botState.getUniqueId(), flightHtmlCardsData[i]));
    }
    htmlCardsObj.addCards(htmlCards);
    botState.addCardsResponse(htmlCardsObj.message());
  }

  let popUpGoogle = new Intent('popUpGoogle');
  popUpGoogle.onMatching = () => {
    return botState.messageFromUser === MESSAGE
  }
  popUpGoogle.onResolution = async () => {
    if (botState.client === State.MOBILECLIENT()) {
      botState.addHTMLResponse({
        title: 'Google',
        url: 'https://google.com',
        autopopup: true,
        modal: true
      });
    } else {
      botState.addStringResponse(`URL popups don't work on web client yet`);
    }
  };

  let main = new Intent('main');
  main.onResolution = async () => {
    myFun();
  };

  const ANOTHER_WAY = 'Another way'
  let anotherWay = new Intent('otherWeb');
  anotherWay.setEnglishSmartSuggestions([ANOTHER_WAY])
  anotherWay.onMatching = () => {
    return botState.messageFromUser === ANOTHER_WAY
  };
  anotherWay.onResolution = async () => {
    webCardsObj.addCards([googleCard]);
    botState.addCardsResponse(webCardsObj.message());
  };
  anotherWay.onPrediction = () => {
    return true
  };

  return [
    main,
    popUpGoogle,
    anotherWay
  ];
};