Alan AI button popups

Note

Alan AI button popups are currently supported on the Web platform. This feature is experimental and may change in future releases.

To make the Alan AI button more noticeable and engage users to interact with the AI assistant, you can show a popup window next to the Alan AI button in your app. The popup window can be styled in any way you like and provide any hint to the user.

To display a popup window, use the showPopup() function in the script. You can show popups, for example, when the user launches your app or gives a specific voice or text command. In the example below, the popup window is displayed when the app is launched and the user activates the AI assistant for the first time. For more details, see User events.

Dialog script

onUserEvent((p, e) => {
    console.info('EVENT', e.event);
    if (e.event == 'firstActivate') {
        p.showPopup({
            html:'<div class="info-popup"> <div class="info-popup_header"><object type="image/svg+xml" class="bot-image" data="https://alan.app/docs/_static/assets/img/script-concepts/popup2.svg" alt="Created by vectorjuice - freepik.com"/></object> <div class="buble">Ask me a question</br>or say</br> <span style="font-size:12px; color:#BD10E0; font-weight:800">"What do you have?"</span></div><div class="info-popup_pointer-button grey-arrow"></div></div></div>',
            style:".bot-image{width:250px;height:250px;margin-left: 4px;margin-top:-20px}.info-popup{background:linear-gradient(.45turn,#efefef,#fff);max-width:394px;height:280px;width:400px;max-height:280px;-webkit-box-shadow:0 5px 14px rgba(0,0,0,.25);box-shadow:0 5px 14px rgba(0,0,0,.25);overflow:hidden;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.info-popup_header{position:relative;display:flex;height:100%;width:100%;color:#000;font-size:13px;font-weight:700;padding-top:48px;padding-right:18px;text-align:center;background:linear-gradient(102.76deg,#fbf7f7 2.32%,#e0e4e9 94.85%);background-repeat:no-repeat;background-position:center center;background-size:100% 100%}.info-popup_pointer-button{margin:22px auto 10px}.buble{min-width:186px;width:186px;height:104px;background-image:url(https://alan.app/docs/_static/assets/img/script-concepts/bubble.svg);background-repeat:no-repeat;background-size:100% auto;padding-left:28px;padding-top:18px;font-size:13px;line-height:20px;position:absolute;top:25px;right:29px}.grey-arrow{background-image:url(https://alan.app/docs/_static/assets/img/script-concepts/grey_arrow.svg);background-repeat:no-repeat;background-size:100% auto;-webkit-transform:rotate(357deg);-ms-transform:rotate(357deg);transform:rotate(357deg);width:104px;height:62px;position:absolute;bottom:14px;right:95px}.alan-overlay-popup__ok{background:none; opacity:0.3; color:#000}.alan-overlay-popup__ok:before{content:'✕';position: absolute;top:0;left:0;width:100%;height:100%;font-size:13px;color:#bfbfbf; opacity:1 !important}",
            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 Alan AI button in the popup window
force	Boolean	If showPopop() 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. For details, see Handlebar templates in popups .

Note

To ensure users provide microphone access to the AI assistant, you can also enable the overlay fade effect in the browser to make the microphone permission prompt more noticeable. For details, see Alan AI button parameters.

Handlebar templates in popups

Alan AI button popups support handlebar templates syntax. Handlebar expressions added to your popup code allow you to customize and personalize the popup appearance and content.

To use handlebars in popups, define an input object in the params parameter of the popup. After that, you can add handlebar expressions in double curly braces {{...}} to the necessary place in the popup code.

In the example below, handlebars are used to display a customized popup displaying the user’s name and current day of week with {{userName}} and {{weekDay}} added to the popup code.

Dialog script

let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let today = new Date();
let dayName = days[today.getDay()];

let myParams = { weekDay: dayName, userName: "John Smith" }

onUserEvent((p, e) => {
    console.info('EVENT', e.event);
    if (e.event == 'firstActivate') {
        p.showPopup({
            html:'<div class="info-popup"> <div class="info-popup_header"><object type="image/svg+xml" class="bot-image" data="https://alan.app/docs/_static/assets/img/script-concepts/popup2.svg" alt="Created by vectorjuice - freepik.com"/></object> <div class="buble">Happy {{weekDay}},</br>{{userName}}!</br> <span style="font-size:12px; color:#BD10E0; font-weight:800">Ready to talk?</span></div><div class="info-popup_pointer-button grey-arrow"></div></div></div>',
            style:".bot-image{width:250px;height:250px;margin-left: 4px;margin-top:-20px}.info-popup{background:linear-gradient(.45turn,#efefef,#fff);max-width:394px;height:280px;width:400px;max-height:280px;-webkit-box-shadow:0 5px 14px rgba(0,0,0,.25);box-shadow:0 5px 14px rgba(0,0,0,.25);overflow:hidden;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.info-popup_header{position:relative;display:flex;height:100%;width:100%;color:#000;font-size:13px;font-weight:700;padding-top:48px;padding-right:18px;text-align:center;background:linear-gradient(102.76deg,#fbf7f7 2.32%,#e0e4e9 94.85%);background-repeat:no-repeat;background-position:center center;background-size:100% 100%}.info-popup_pointer-button{margin:22px auto 10px}.buble{min-width:186px;width:186px;height:104px;background-image:url(https://alan.app/docs/_static/assets/img/script-concepts/bubble.svg);background-repeat:no-repeat;background-size:100% auto;padding-left:28px;padding-top:18px;font-size:13px;line-height:20px;position:absolute;top:25px;right:29px}.grey-arrow{background-image:url(https://alan.app/docs/_static/assets/img/script-concepts/grey_arrow.svg);background-repeat:no-repeat;background-size:100% auto;-webkit-transform:rotate(357deg);-ms-transform:rotate(357deg);transform:rotate(357deg);width:104px;height:62px;position:absolute;bottom:14px;right:95px}.alan-overlay-popup__ok{background:none; opacity:0.3; color:#000}.alan-overlay-popup__ok:before{content:'✕';position: absolute;top:0;left:0;width:100%;height:100%;font-size:13px;color:#bfbfbf; opacity:1 !important}",
            overlay: true,
            buttonMarginInPopup: 15,
            force: false,
            params: myParams
        });
    }
});

Popup editor

Alan AI Studio comes with the popup editor – a built-in tool that allows you to preview your popups and edit the popup code in a convenient way. For details, see Popup editor.