Edit this page

Chat Toolbar

The toolbar of the Chat allows you to add toolbar actions for achieving more user-friendly conversational UI.

The toolbar is located below the input box of the Chat. You can display or hide the toolbar by clicking the toolbar icon which is placed to the left of the Send button. The Chat toolbar enables you to add buttons for end-user interaction. Depending on the executed command in the toolbar, you can also implement a specific functionality by handling the toolClick event.

Configuring Toolbar Items

To configure the Toolbar items, use the toolbar.buttons option of the Chat.

<div id="chat"></div>
<script>
    $("#chat").kendoChat({
        toolClick: function(e) {
            console.log("Button name: " + e.name);
        },
        toolbar: {
            buttons: [
                { name: "ButtonA", iconClass: "k-icon k-i-image" },
                { name: "ButtonB", iconClass: "k-icon k-i-wrench" }
            ]
        }
    });
</script>

Configuring Toolbar Behavior

The Chat configuration object allows you to configure the following behavior aspects of the toolbar:

  • The animation behavior of its toolbar.
  • Whether the toolbar will be scrollable. A scrollbar is useful when the buttons cannot entirely fit within the width of the Chat.
  • Whether the toolbar will be displayed or hidden upon a button click.
<div id="chat"></div>
<script>
    $("#chat").kendoChat({
        toolbar: {
            toggleable: true,
            scrollable: true,
            animation: {
                collapse: {
                    effects: "expandVertical fadeIn",
                    duration: 500
                },
                expand: {
                    effects: "expandVertical fadeIn",
                    duration: 500
                }
            },
            buttons: [
                { name: "ButtonA", iconClass: "k-icon k-i-image" },
                { name: "ButtonB", iconClass: "k-icon k-i-wrench" }
            ]
        }
    });
</script>

See Also

For runnable examples on Kendo UI Chat, refer to the Kendo UI Demos site.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy