Chat Bot Services

The Chat allows you to connect to any remote service that can return content to the widget.

Communicating with the Remote Service

To connect the Chat to and render the responses from any service, utilize the post event of the widget and its public API. The post event allows you to react on user interaction. Its event arguments object contains all the information about the typed message or the taken action, and the user data. This approach allows you to send all the data to the remote Chat Bot service of your choice. Then, depending on the service architecture, the implementation will react on the response from the remote server and display it appropriately in the Chat.

An example of such communication is to send an AJAX request to a server endpoint and display the returned data in the Chat widget.

<div id="chat"></div>

<script>
  $(document).ready(function () {
    // The post event handler.
    function onPost(args) {
      var chat = args.sender;

      // Initiate an AJAX request and pass the args.text value.
      $.ajax("https://demos.telerik.com/kendo-ui/service/Products/Read", {
        dataType: "jsonp",
        data: {
          skip: args.text,
          take: 1
        }
      }).then(function(response) {
        // Retrieve the needed data from the received response.
        var userName = response[0].ProductName;
        var text = "Response from " + userName;

        // Render a the returned text in the Chat.
        // Pass also the user (remote) info as a second parameter.
        chat.renderMessage({
          type: "text",
          text:  text,
          timestamp: new Date()
        }, {
          name: userName
        });
      }).fail(function(error) {
        // Handle failed AJAX.
      })
    }

    // Initialize the Chat widget.
    var chat = $("#chat").kendoChat({
      post: onPost
    }).data("kendoChat");

    // Initially render a hint message to the user.
    chat.renderMessage({
      type: "text",
      text:  "Type a number from 1 to 70",
      timestamp: new Date()
    }, {
      name: "Botyo"
    });
  });
</script>

Encapsulating the Communication Logic

You can achieve the same result by encapsulating the communication logic in an agent class. The agent class will handle the communication with the external Chat Bot service.

<div id="chat"></div>

<script>
  $(document).ready(function () {
    // Initialize the Chat
    var chat = $("#chat").kendoChat({
      post: function (args) {
        agent.postMessage(args);
      }
    }).data("kendoChat");

    // Create a new agent and pass the Chat widget.
    var agent = new ChatAgent(chat);

    // Initially render a hint message to the user.
    agent.chat.renderMessage({
      type: "text",
      text:  "Type a number from 1 to 70",
      timestamp: new Date()
    }, {
      name: "Botyo"
    });
  });
</script>

<script>
  window.ChatAgent = kendo.Class.extend({
    // Initialize the ChatAgent object.
    init: function (chat) {
      this.chat = chat;
    },
    // Implement the postMessage logic.
    postMessage: function (args) {
      var chat = this.chat;

      // Initiate an AJAX request and pass the args.text value.
      $.ajax("https://demos.telerik.com/kendo-ui/service/Products/Read", {
        dataType: "jsonp",
        data: {
          skip: args.text,
          take: 1
        }
      }).then(function(response) {
        // Retrieve the needed data from the received response.
        var userName = response[0].ProductName;
        var text = "Response from " + userName;

        // Render a the returned text in the Chat.
        // Pass also the user (remote) information as a second parameter.
        chat.renderMessage({
          type: "text",
          text:  text,
          timestamp: new Date()
        }, {
          name: userName
        });
      }).fail(function(error) {
        // Handle failed AJAX
      })
    }
  });
</script>

See Also

In this article
Not finding the help you need? Improve this article