Chat buttons

To enhance and streamline the user experience, you can display buttons in the Alan AI Chat.

Buttons are clickable elements that present users with a list of options or actions they can take. When the user clicks a button, the AI assistant responds back or triggers some logic defined in the dialog script.

Buttons can be used for a variety of purposes, including:

  • Presenting a menu of options

  • Initiating specific tasks or actions

  • Providing quick access to commonly used features

  • Confirming or denying users’ actions

  • Submitting requests and more

To display buttons in the chat UI, use the showPopup() function in the script. In the example below, when the user says: Help me, two options are displayed as buttons: Read FAQ and Contact support:

Dialog script
intent(
    "I need (some|) (help|support|assistance)",
    "(Can you|) help me (please|)",
    p => {
        p.play("Please choose an option that suits you best:");
        p.showPopup({
            html:'<div class="alan-chat-buttons"><div send-text="Read FAQ" class="alan-chat-button">Read FAQ</div><div send-text="Contact support" class="alan-chat-button">Contact support</div></div>',
            style:".alan-chat-buttons {width: 100%; text-align: center;}.alan-chat-button { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #0078FF; text-decoration: none; border: 2px solid #0078FF; border-radius: 30px; cursor: pointer;  margin: 3px; font-weight: bold;}.alan-chat-button:hover { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #318CF3; text-decoration: none; border: 2px solid #318CF3; border-radius: 30px; cursor: pointer; margin: 3px; font-weight: bold;}",
            overlay: true,
            buttonMarginInPopup: 15,
            force: true,
            type: "chat",
        });
    });

intent("Read FAQ", p => {
    p.play("Opening the FAQ section...");
    p.play({command: "openPage", url: "https://alan.app/docs/usage/additional/faq/"}, opts({force:true}));
});

intent("Contact support", p => {
    p.play("Please provide a detailed description of the problem you have encountered...");
});
../../_images/buttons.png

Button parameters

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

Name

Type

Description

html

HTML markup

Contains the HTML markup of buttons

css

CSS markup

Contains the styles of buttons

force

Boolean

If showPopop() is used after the play() function, defines whether buttons 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 button text labels. For details, see Button text values .

Button actions

When a button in the chat UI is clicked, the AI assistant can perform one of the following actions:

  • Invoke an intent in the dialog script. To do this, you must add the send-text="Your text" parameter to <div> block of the button. The defined text must coincide with the pattern of the intent you want to invoke when the button is clicked.

  • Call a project API method in the dialog script. To do this, you must add the following parameters to the <div> block of the button:

    • call-project-api="methodName": in this parameter, define the name of the project API method you want to call when the button is clicked

    • project-api-param=\'{"data":"Your data"}\': in this parameter, define the data you want to pass to the project API method

In the example below, clicking the Read FAQ button invokes an intent, while clicking the Contact support button calls the contactSupport project API method:

Dialog script
intent(
    "I need (some|) (help|support|assistance)",
    "(Can you|) help me (please|)",
    p => {
        p.play("Please choose an option that suits you best:");
        p.showPopup({
            html:'<div class="alan-chat-buttons"><div send-text="Read FAQ" class="alan-chat-button">Read FAQ</div><div call-project-api="contactSupport" project-api-param=\'{"data":"Your data"}\' class="alan-chat-button">Contact support</div></div>',
            style:".alan-chat-buttons {width: 100%; text-align: center;}.alan-chat-button { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #0078FF; text-decoration: none; border: 2px solid #0078FF; border-radius: 30px; cursor: pointer;  margin: 3px; font-weight: bold;}.alan-chat-button:hover { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #318CF3; text-decoration: none; border: 2px solid #318CF3; border-radius: 30px; cursor: pointer; margin: 3px; font-weight: bold;}",
            force: false,
            type: "chat",
        });
    });

intent("Read FAQ", p => {
    p.play("Opening the FAQ section...");
    p.play({command: "openPage", url: "https://alan.app/docs/usage/additional/faq/"}, opts({force:true}));
});

projectAPI.contactSupport = function(p, param, callback) {
    p.play("Please provide a detailed description of the problem you have encountered...");
    p.userData.data = param.data;
    console.log(p.userData.data);
    callback();
};

Button text values

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

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

In the example below, when the user says: Schedule a meeting with sales, the AI assistant displays three time slot options defined in the myParams object:

Dialog script
let timeSlots = {slot01: "10:00 AM", slot02: "11:00 AM", slot03: "12:00 PM"}

intent("Schedule a meeting with sales", p => {
    p.play("Sure! When would you like to meet?");
    p.showPopup({
        html:`<div class="alan-chat-buttons"><div call-project-api="scheduleMeeting" project-api-param=\'{"time":"${timeSlots.slot01}"}\' class="alan-chat-button">{{slot01}}</div><div call-project-api="scheduleMeeting" project-api-param=\'{"time":"${timeSlots.slot02}"}\' class="alan-chat-button">{{slot02}}</div><div call-project-api="scheduleMeeting" project-api-param=\'{"time":"${timeSlots.slot03}"}\' class="alan-chat-button">{{slot03}}</div></div>`,
        style:".alan-chat-buttons {width: 100%; text-align: center;}.alan-chat-button { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #0078FF; text-decoration: none; border: 2px solid #0078FF; border-radius: 30px; cursor: pointer;  margin: 3px; font-weight: bold;}.alan-chat-button:hover { display: inline-block; padding: 10px; background-color: #FFFFFF; color: #318CF3; text-decoration: none; border: 2px solid #318CF3; border-radius: 30px; cursor: pointer; margin: 3px; font-weight: bold;}",
        force: false,
        type: "chat",
        params: timeSlots
    });
});

projectAPI.scheduleMeeting = function(p, param, callback) {
    p.userData.time = param.time;
    p.play(`Thanks! Let's meet at ${p.userData.time}`);
    console.log(`Option selected: ${p.userData.time}`);
    callback();
};
../../_images/buttons-handlebars.png