Chat cards¶

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

A card is a rectangular 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

To display cards in the chat UI, use the showPopup() function in the script.

In the example below, a card displays a greeting to the user when the user opens the chat and a new dialog session is created:

Dialog script¶

onCreateUser((p) => {
    p.showPopup({
        style:".card-img {width: 100%;margin-top: 0px;}.info-popup {background: #f6f6f6;max-width: 400px;height: 360px;width: 100%;max-height: 360px;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 {padding: 0px;display: block;color: #000;font-size: 22px;font-weight: 700;text-align: center;background: #02115F;background-repeat: no-repeat;background-position: center center;background-size: 100% 100%;padding: 20px;}.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: 20px;line-height: 18px;text-align: center;color: #000;padding: 9px 50px;height: 89px}.info-text {font-size: 14px;font-weight: 400;display: contents;margin: 0px;}",
        html: `<div class="info-popup"><div class="info-popup_header"><img type="image/svg+xml" class="card-img" src="https://alan.app/docs/_static/assets/img/script-concepts/alan-card.png"></div>  <div class="info-popup_body"><span class="info-text">Hi, I am Alan, your AI assistant! <br/> You can talk to me, ask questions and perform tasks with text commands.</span></div></div>`,
        force: false,
        type: "chat",
    });
});

In the example below, a card displays a greeting at the beginning of the dialog session and when the user clears the previous dialog from the chat. For that, use a project API method that is invoked when the Alan AI button is authorized:

Dialog script¶

projectAPI.sendGreetingMessage = function(p, param, callback) {
    p.showPopup({
        style:".card-img {width: 100%;margin-top: 0px;}.info-popup {background: #f6f6f6;max-width: 400px;height: 340px;width: 100%;max-height: 340px;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 {padding: 0px;display: block;color: #000;font-size: 22px;font-weight: 700;text-align: center;background: #02115F;background-repeat: no-repeat;background-position: center center;background-size: 100% 100%;padding: 20px;}.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: 20px;line-height: 18px;text-align: center;color: #000;padding: 9px 50px;height: 89px}.info-text {font-size: 14px;font-weight: 400;display: contents;margin: 0px;}",
        html: `<div class="info-popup"><div class="info-popup_header"><img type="image/svg+xml" class="card-img" src="https://alan.app/docs/_static/assets/img/script-concepts/alan-card.png"></div>  <div class="info-popup_body"><span class="info-text">Hi, I am Alan, your AI assistant! <br/> How can I help you?</span></div></div>`,
        force: false,
        type: "chat",
    });
    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>

Card parameters¶

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

Name	Type	Description
`html`	HTML markup	Contains the HTML markup of the card
`css`	CSS markup	Contains the styles of the card
`force`	Boolean	If `showPopop()` is used after the `play()` function, defines whether the card must be displayed immediately (`true`) or after the text specified in the `play()` function has been played (`false`)
`type`	String	Defines the type of AI assistant: `chat`
`params`	Object	Contains an input object to be applied to handlebar templates used in the card text. For details, see Card text values .

Card text values¶

To set a value for the card message, you can use handlebar templates syntax. Handlebar expressions added to the card text allow you to customize and personalize the card appearance and content.

To use handlebars with cards, define an input object in the params parameter of the card code. After that, you can add handlebar expressions in double curly braces {{...}} to the card text.

In the example below, handlebars are used to create a customized card text with the user’s name:

Dialog script¶

let myParams = {name: "John Smith"}

onCreateUser((p) => {
    p.showPopup({
        style:".card-img {width: 100%;margin-top: 0px;}.info-popup {background: #f6f6f6;max-width: 400px;height: 360px;width: 100%;max-height: 360px;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 {padding: 0px;display: block;color: #000;font-size: 22px;font-weight: 700;text-align: center;background: #02115F;background-repeat: no-repeat;background-position: center center;background-size: 100% 100%;padding: 20px;}.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: 20px;line-height: 18px;text-align: center;color: #000;padding: 9px 50px;height: 89px}.info-text {font-size: 14px;font-weight: 400;display: contents;margin: 0px;}",
        html: `<div class="info-popup"><div class="info-popup_header"><img type="image/svg+xml" class="card-img" src="https://alan.app/docs/_static/assets/img/script-concepts/alan-card.png"></div>  <div class="info-popup_body"><span class="info-text">Hi, {{name}}, I am Alan, your AI assistant! <br/> You can talk to me, ask questions and perform tasks with text commands.</span></div></div>`,
        force: false,
        type: "chat",
        params: myParams
    });
});

Chat cards¶

Card parameters¶

Card text values¶

Popup editor¶