Alan AI button popups

To make the Alan AI button more noticeable and encourage users to interact with the AI agent, you can show an Alan AI popup in the app.

The popup is a small window next to the AI agent 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. For more details, see User events.

You can customize the popup in any way and add graphics and messages to it to attract the users’ attention.

Note

Alan AI button popups are currently supported on the Web platform.

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 agent 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="https://assets-global.website-files.com/64ec3fc5bb945b48c0a37b1c/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,
       });
    }
});
../../_images/popup.png