Chat cards

To present information in the Alan AI Agentic Interface in a structured and visually appealing way, you can display Agentic Interface messages as cards.

A card is a container that can hold text, images, icons and other information. Cards are designed to present data in a simple and focused manner, making it easier for users to scan and comprehend the content.

You can use cards to showcase a variety of content, including:

  • Greeting messages

  • Recommendations or suggestions

  • Product details

  • Content summary and more

Card display options

To display cards in the Agentic Interface UI, you can:

  • Add Markdown formatted text to the p.play() function

  • Use the showPopup() function in the script

You can display a card as Markdown formatted text in the p.play() function. To do this:

  1. Format the card text using Markdown. For details, see Markdown Basic Syntax.

  2. In the p.play() function, enable the markdown option: opts({markdown: true}). For details, see Play options.

In the example below, the Agentic Interface displays a greeting to the user when a new dialog session starts:

Dialog script
onCreateUser(p => {
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your Agentic Interface!";
    const greetingText = "You can talk to me, ask questions and perform tasks with text commands. For example, you can ask: \n - What pricing plans are available? \n - How do I contact Sales? \n - Where can I find Alan docs?";
    const img = `<img style="display: block;margin-bottom: 20px; height:75px" src="${greetingImage}"/>`;
    const title = `<div style="margin-bottom: 10px;font-weight: 700;font-size: 20px;">${greetingTitle}</div>`;
    p.play(`${img}${title}${greetingText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
});
../../_images/chat-card-markdown.png

You can display a card using the showPopup() function.

In the example below, the Agentic Interface displays a greeting to the user when a new dialog session starts:

Dialog script
onCreateUser(p => {
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "WELCOME!";
    const greetingText = "I'm Alan, your Agentic Interface, standing by to provide you with information and support";
    const backgroundColor = "#f6f6f6";
    const topBackgroundColor = "#fff";
    const bottomHeight = "310px";

    p.showPopup({
        style:`.img {width: 240px;margin: 20px;}.info-popup {background: ${backgroundColor};max-width: 100%;height: ${bottomHeight};width: 100%;max-height: ${topBackgroundColor};box-shadow: 0px 1px 3px rgba(16, 39, 126, 0.2);overflow: hidden;border-radius: 10px;display: block;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column}.info-popup_header {background: ${topBackgroundColor};padding: 0px;display: block;color: #000;font-size: 22px;font-weight: 700;text-align: center;background: #fff;background-repeat: no-repeat;background-position: center center;background-size: 100% 100%}.info-popup_body {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;font-weight: 400;font-size: 23px;line-height: 48px;text-align: center;color: #000;padding: 9px ​50px;height: 89px;}.info-popup_pointer-button {margin: 20px 20px;line-height: 20px;}`,
        html: `<div class="info-popup"><div class="info-popup_header" style="font-size: 21px;"><img type="image/svg+xml" class="img" src="${greetingImage}" alt="image" /></div><div class="info-popup_body"><div class="info-popup_pointer-button grey-arrow">${greetingTitle}<br/><span style="font-size:14px; font-weight:400; display: contents;">${greetingText}</span></div></div></div>`,
        overlay: true,
        buttonMarginInPopup: 15,
        force: false,
         type: "chat",
    });
});
../../_images/chat-card.png

Card display events

You can choose to display a card in the Agentic Interface on different events, for example:

  • When the dialog transitions between different states: the user starts a new dialog session, the visual state is set, a specific Alan AI event is fired and so on. For details, see Lifecycle callbacks.

  • When an intent is matched. For details, see User commands.

  • When a project API method is called. For details, see Project API.

In the example below, the Agentic Interface displays a greeting card to the user when a new dialog session starts and the onCreateUser() predefined callback is invoked:

Dialog script
onCreateUser(p => {
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your Agentic Interface!";
    const greetingText = "You can talk to me, ask questions and perform tasks with text commands. For example, you can ask: \n - What pricing plans are available? \n - How do I contact Sales? \n - Where can I find Alan docs?";
    const image = `<img style="display: block;margin-bottom: 20px; height:75px" src="${greetingImage}"/>`;
    const title = `<div style="margin-bottom: 10px;font-weight: 700;font-size: 20px;">${greetingTitle}</div>`;
    p.play(`${image}${title}${greetingText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
});
../../_images/chat-card-markdown.png

In the example below, the Agentic Interface displays a card to the user when the What platforms do you support? intent is matched:

Dialog script
intent('What platforms do you support?', p => {
    const cardImage = "https://assets-global.website-files.com/64ec3fc5bb945b48c0a37b1c/650a990518d70919bfea06c8_integrate_benefit2.webp";
    const cardText = "We support a broad range of languages and frameworks, including: \n\n - React \n\n - Angular \n\n - Flutter \n\n - Ionic and [more](https://alan.app/docs/client-api/integration/)";
    const image = `<img style="display: block;margin-bottom: 20px;" src="${cardImage}"/>`;
    p.play(`${image}${cardText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
});
../../_images/chat-card-intent.png

In the example below, the Agentic Interface displays a greeting when the Alan AI agentic interface is authorized and the sendGreetingMessage() project API method is invoked in the app:

Dialog script
projectAPI.sendGreetingMessage = function(p, param, callback) {
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your Agentic Interface!";
    const greetingText = "You can talk to me, ask questions and perform tasks with text commands. For example, you can ask: \n - What pricing plans are available? \n - How do I contact Sales? \n - Where can I find Alan docs?";
    const image = `<img style="display: block;margin-bottom: 20px; height:75px" src="${greetingImage}"/>`;
    const title = `<div style="margin-bottom: 10px;font-weight: 700;font-size: 20px;">${greetingTitle}</div>`;
    p.play(`${image}${title}${greetingText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
    callback();
};
Client app
<script>
  var alanBtnInstance = alanBtn({
    key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE",
    onConnectionStatus: function (status) {
      if (status === 'authorized') {
        window.alanBtnInstance.callProjectApi("sendGreetingMessage");
      }
    },
    rootEl: document.getElementById("alan-btn"),
  });
</script>
../../_images/chat-card-markdown.png

Card parameters

The showPopup() function displaying cards in the Agentic Interface takes the following parameters: