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

Chat buttons setup

Note

The button syntax differs between Alan AI SLU versions. Select the appropriate SLU version using the tabs below.

To display buttons in the chat UI, use the showButtons() function in the script.

In the example below, when a new dialog session starts, the AI assistant displays a greeting with two buttons: Talk to sales and Just browsing:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showButtons({
        buttons:[
            {label:'Talk to sales'},
            {label:'Just browsing'},
        ],
        force: true
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

intent("Just browsing", p => {
    p.play("What would you like me to do?");
});
../../_images/buttons-4.x.png

Button parameters

The showButtons() function takes the following parameters:

Name

Type

Description

buttons

Array

Contains a list of buttons to be displayed in the chat. For each button in the list, the following parameters must be defined:

  • label: button text

  • action to be triggered when the button is clicked: sendText, setVisualState, callProjectApi. For details, see Button actions.

force

Boolean

If showButtons() 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).

Button actions

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

Intents

On button click, you can invoke an intent in the dialog script. To do this, you can do either of the following:

  • Define only the label parameter for the button. In this case, the label text must match the pattern of the intent you want to invoke.

  • Define the label and sendText parameters for the button. In this case, the label text can vary, and the text of the sendText parameter must match the pattern of the intent you want to invoke.

In the example below, when the Talk to sales and Just browsing buttons are clicked, corresponding intents are invoked in the dialog script. Note that the label for the second button differs from the pattern of the intent to be invoked:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showButtons({
        buttons:[
            {label:'Talk to sales'},
            {label:'Just browsing', sendText: "I am just browsing"},
        ],
        force: true
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

intent("I am just browsing", p => {
    p.play("What would you like me to do?");
});

Visual state

On button click, you can set the visual state in the dialog. To do this, you must add the setVusialState parameter to the button and define the visual state data.

In the example below, when the Go to docs button is clicked, the visual state is set to docs and the AI assistant plays a message: Welcome to Alan AI docs!:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showButtons({
        buttons:[
            {label:'Talk to sales'},
            {label:'Go to docs', setVisualState: {page: "docs"}}
        ],
        force: true
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

onVisualState((p, s) => {
    console.log(JSON.stringify(s));
    if (s.page === "docs") {
        p.play("Welcome to Alan AI docs!")
    }
});

Project API

On button click, you can call a project API method in the dialog script. To do this, you must add the callProjectApi parameter to the button, define the method name and data you want to pass to the project API method.

In the example below, when the Contact support button is clicked, the contactSupport() project API method is called and the user’s name is passed to the method:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showButtons({
        buttons:[
            {label:'Talk to sales'},
            {label:'Contact support', callProjectApi: {method:'contactSupport', data:{name:'John Smith'}}}
        ],
        force: true
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

projectAPI.contactSupport = function(p, param, callback) {
    p.userData.name = param.name
    p.play(`Thank you, ${p.userData.name}. Please provide a detailed description of the problem you have encountered...`);
    callback();
};

Button design

The design of buttons displayed in the chat is defined at the project level. To change the buttons look:

  1. At the top of the code editor, click Integrations.

  2. Next to the Text chat option, click Change.

  3. In the Web/Text chat view, scroll down to the Buttons section and adjust the buttons look as required. You can change the following settings:

    • Font size: specify the font size for chat buttons. The value must be between 10px and 22px.

    • Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: set the border radius for the corners of chat buttons.

    • Font color: choose the font color for chat buttons.

    • Background color: choose the background color for chat buttons.

    • Border color: choose the border color for chat buttons.

    • With shadow: disable this option not to show shadow for chat buttons.

    • Buttons alignment: choose how chat buttons must be aligned in the compact and full screen modes: on the left, in the center or on the right.

../../_images/buttons-design-4.x.png

To display buttons in the chat UI, use the showPopup() function in the script.

In the example below, when a new dialog session starts, the AI assistant displays a greeting with two buttons: Talk to sales and Just browsing:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showPopup({
        html:`<div class="alan-chat-buttons"><div send-text="Talk to sales" class="alan-chat-button">Talk to sales</div><div send-text="Just browsing" class="alan-chat-button">Just browsing</div></div>`,
        style:`.alan-chat-buttons {width: 100%; text-align: right;} .alan-btn_text-chat-full-screen .alan-chat-buttons{text-align: left;} .alan-chat-button {display: inline-block; padding: 10px; background-color: #FFFFFF; color: #000; text-decoration: none; border: 1px solid #D4DDFF; border-radius: 10px; cursor: pointer; margin: 3px; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:hover { cursor: pointer; border-color: #2757FF; color: #2757FF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:active { background-color: #E9EEFF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}`,
        overlay: true,
        force: false,
        type: "chat",
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

intent("Just browsing", p => {
    p.play("What would you like me to do?");
});
../../_images/buttons.png

Button parameters

The showPopup() function 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 is clicked, the AI assistant can perform one of the following actions:

Intents

On button click, you can invoke an intent in the dialog script. To do this, you must add the sendText(\'Your text\') parameter to <div> block of the button. The text in the send-text parameter must match the pattern of the intent you want to invoke.

In the example below, when the Talk to sales and Just browsing buttons are clicked, corresponding intents are invoked in the dialog script:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showPopup({
        html:`<div class="alan-chat-buttons"><div send-text="Talk to sales" class="alan-chat-button">Talk to sales</div><div send-text="Just browsing" class="alan-chat-button">Just browsing</div></div>`,
        style:`.alan-chat-buttons {width: 100%; text-align: right;} .alan-btn_text-chat-full-screen .alan-chat-buttons{text-align: left;} .alan-chat-button {display: inline-block; padding: 10px; background-color: #FFFFFF; color: #000; text-decoration: none; border: 1px solid #D4DDFF; border-radius: 10px; cursor: pointer; margin: 3px; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:hover { cursor: pointer; border-color: #2757FF; color: #2757FF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:active { background-color: #E9EEFF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}`,
        overlay: true,
        force: false,
    });
});

intent("Talk to sales", p => {
    p.play("Awesome, I just need to confirm some information first...");
});

intent("Just browsing", p => {
    p.play("What would you like me to do?");
});

Project API

On button click, you can 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

  • 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, when the Contact support button is clicked, the contactSupport() project API method is called:

Dialog script
onCreateUser(p => {
    // Chat greeting
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, this is Alan, your AI assistant!";
    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 Alan 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}));

    // Chat buttons
    p.showPopup({
        html:`<div class="alan-chat-buttons"><div class="alan-chat-button" call-project-api="contactSupport" project-api-param=\'{"data":"Your data"}\'>Contact support</div><div send-text="Just browsing" class="alan-chat-button">Just browsing</div></div>`,
        style:`.alan-chat-buttons {width: 100%; text-align: right;} .alan-btn_text-chat-full-screen .alan-chat-buttons{text-align: left;} .alan-chat-button {display: inline-block; padding: 10px; background-color: #FFFFFF; color: #000; text-decoration: none; border: 1px solid #D4DDFF; border-radius: 10px; cursor: pointer; margin: 3px; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:hover { cursor: pointer; border-color: #2757FF; color: #2757FF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:active { background-color: #E9EEFF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}`,
        overlay: true,
        force: false,
        type: "chat",
    });
});

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();
};

intent("Just browsing", p => {
    p.play("What would you like me to do?");
});

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: right;} .alan-btn_text-chat-full-screen .alan-chat-buttons{text-align: left;} .alan-chat-button {display: inline-block; padding: 10px; background-color: #FFFFFF; color: #000; text-decoration: none; border: 1px solid #D4DDFF; border-radius: 10px; cursor: pointer; margin: 3px; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:hover { cursor: pointer; border-color: #2757FF; color: #2757FF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}  .alan-chat-button:active { background-color: #E9EEFF; transition: color 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;}`,
        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

Alan AI Studio comes with the popup editor – a tool that allows you to preview UI widgets, such as buttons, cards and Alan AI button popups, and edit their code in a convenient way.

To open a UI widget in the popup editor:

  1. In the code editor, to the left of showPopup(), click the edit icon.

  2. If you have several popups in the dialog script, in the left pane, select the widget you want to preview.

  3. To prettify the code, at the top of the editor, click Format HTML, Format CSS and Format Params.

  4. Edit the HTML, CSS code and update params data if needed.

  5. In the lower part of the editor, select the platform and device on which you want to preview the element. You can preview the element on a single device or choose to display all versions at once: browser, tablet and mobile.

  6. To change the background, click the Device background color picker and choose the color.

  7. To save the results, at the bottom of the left pane, click Save changes.

Note

To be rendered in the popup editor, the params object should only contain numbers, strings, Boolean values or arrays/objects constructed with these values. If your params object contains other types of values, the popup editor will fail to generate a real-time preview for your data. You can edit the params data directly in the editor. Mind, however, that these changes will not be saved.