Zenera | Powering AI-Native Transformation

To present information in the Zenera AI-Native Interface in a structured and visually appealing way, you can display AI-Native 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 AI-Native Interface UI, you can:

Add Markdown formatted text to the p.play() function
Use the showPopup() function in the script

Markdown

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

Format the card text using Markdown. For details, see Markdown Basic Syntax.
In the p.play() function, enable the markdown option: opts({markdown: true}).

In the example below, the AI-Native 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 Zenera, your AI-Native 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 Zenera 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}));
});

showPopup()

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

In the example below, the AI-Native 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 Zenera, your AI-Native 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",
    });
});

Card display events

You can choose to display a card in the AI-Native 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 Zenera event is fired and so on.
When an intent is matched.
When a project API method is called.

Callbacks

In the example below, the AI-Native 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 Zenera, your AI-Native 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 Zenera 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}));
});

Intents

In the example below, the AI-Native 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://zenera.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}));
});

Project API

In the example below, the AI-Native Interface displays a greeting when the Zenera AI-Native 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 Zenera, your AI-Native 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 Zenera 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_ZENERA_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 AI-Native Interface 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 `showPopup()` 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-Native Interface: `chat`.
`params`	Object	Contains an input object to be applied to handlebar templates used in the card text.

Popup editor

In Zenera Studio, you can use the Popup Editor to design and customize cards for the AI-Native Interface. The editor provides a visual interface for creating card layouts, styling elements, and previewing how cards will appear to users.