To make the Zenera AI-Native Interface more noticeable and encourage users to interact with it, you can show a popup in the app.
The popup is a small window next to the AI-Native Interface button that appears when a certain event is fired or action is performed. For example, you can choose to display the popup when the user launches the app or gives a specific voice or text command.
Note
AI-Native Interface popups are currently supported on the Web platform.
You can customize the popup in any way and add graphics and messages to it to attract the users' attention.
Displaying a popup
To display a popup window, use the showPopup() function in the script. In the example below, the popup window appears when the app is launched and the user clicks the AI-Native Interface button for the first time:
Dialog script
onUserEvent((p, e) => {
console.info('EVENT', e.event);
if (e.event == 'firstClick') {
p.showPopup({
style:".card-img {width: 100%;margin-top: 0px;}.info-popup {background: #fff;max-width: 400px;height: 350px;width: 400px;max-height: 350px;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: #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: 20px;line-height: 18px;text-align: left;color: #000;padding: 9px 50px;height: 100px}.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="/images/design-mode/6513eeb685e4c3f99bbd76b4_Customization_benefit2.webp"></div><div class="info-popup_body"><span class="info-text">Hi, I am Alan! <br/> Click the button to talk to me, <br/> ask questions and perform tasks</span></div></div>',
overlay: true,
buttonMarginInPopup: 15,
force: false,
});
}
});Popup parameters
The showPopup() function takes the following parameters:
| Name | Type | Description |
|---|---|---|
html | HTML markup | Contains the HTML markup of the popup window |
css | CSS markup | Contains the styles of the popup window |
closeIconSrc | String | Contains a path to a custom close popup icon |
overlay | Boolean | Defines whether the overlay effect must be used (true) or not (false) |
buttonMarginInPopup | Pixels | Defines the margins for the Zenera AI-Native Interface in the popup window |
force | Boolean | If showPopup() is used after the play() function, defines whether the popup window must be displayed immediately (true) or after the text specified in the play() function has been played |
params | Object | Contains an input object to be applied to handlebar templates in the popup code |
Note
To ensure users provide microphone access to the AI-Native Interface, you can also enable the overlay fade effect in the browser to make the microphone permission prompt more noticeable.
Popup editor
You can use the popup editor in Zenera Studio to create and customize popups visually. The editor provides a user-friendly interface for designing popup windows without writing code manually.