Card submission option

[tonizemani]

Would it be possible to add an option where the media sent has the form of a card?

[OvidijusParsiunas]

Hey @tonizemani. I am not fully sure what you mean by card. Could you elaborate a little more on this. Thankyou!

[tonizemani]

Hey @tonizemani. I am not fully sure what you mean by card. Could you elaborate a little more on this. Thankyou!

Hello, a card is an HTML component commonly referred to a collection of a title, image and or description. Below are some examples https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Card

[OvidijusParsiunas]

To display HTML cards in messages, all you need to do is use the html message property. Example (JavaScript):

chatElementRef.initialMessages = [
  {
    html: `
      <article class="card">
        <header>
          <h2>A short heading</h2>
        </header>
        <img class="card-image" src="https://upload.wikimedia.org/wikipedia/commons/6/64/Dall-e_3_%28jan_%2724%29_artificial_intelligence_icon.png">
        <div class="content">
          <p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p>
        </div>
      </article>
    `,
  },
];

To style it, you will need to use the htmlClassUtilities property. Example (JavaScript):

chatElementRef.htmlClassUtilities = {
  'card-image': {
    styles: {
      default: {
        objectFit: 'cover',
        width: '100%',
        height: '100%',
      },
    },
  },
};

If you can't change the response messages in the server, you can use the responseInterceptor property to help you.

Having read your message, if you mean that you want to send a message that would be in a form of a card. The closest to that is the use of the submitUserMessage method. However there is no direct way to change the message bubble into a card when the user hits the submit button or clicks enter. If this is what you need then you will have to clone/fork the project and augment the code to suit your needs. This is simple to do by following these detailed instructions.

Let me know if this helps. Thanks!

[tonizemani]

Thank you for the response, also amazing work with the whole module!