R2 2018 Release is here – now with modern UI for chatbots and more! See what’s new!

Chat - Insurance

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Telerik Chat for ASP.NET AJAX component allows for integration with any bot framework, due to its simplicity, flexible API and customizable templates.

This demo demonstrates how the control can be connected to a chat bot created in Google's Dialogflow. The sample shows off out of the box features of the Chat component, such as the hero cards and suggested actions, as well as the ability to define custom templates to fit any custom payload, returned by the service.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow" style="text-align: center">
        <telerik:RadChat runat="server" ID="RadChat1" Skin="Default">
            <ClientEvents OnPost="onPost" OnLoad="onLoad" />
            <UserSettings Name="John" />
        </telerik:RadChat>
    </div>
    <!-- Load Promise Polyfill. Required by the DialogFlow Client API.-->
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>

    <!-- Load DialogFlow Client API -->
    <script src="https://cdn.rawgit.com/dialogflow/dialogflow-javascript-client/50e82e62/target/ApiAi.min.js"></script>

    <telerik:RadCodeBlock runat="server">
        <script>
            var $ = $ || $telerik.$;

            function onLoad(sender, args) {
                sender.agent = new DialogFlowAgent(sender);
            }

            function onPost(sender, args) {
                sender.agent.postMessage(args.get_text());
            }

            var DialogFlowAgent = kendo.Class.extend({
                init: function (chat) {
                    this.chat = chat;
                    this.userInfo = {
                        id: "botty",
                        iconUrl: "images/avatar.png",
                        name: "Botty McbotFace"
                    };

                    this.agent = new ApiAi.ApiAiClient({ accessToken: "280344fb165a461a8ccfef7e1bb47e65" });

                    this.postEvent("Welcome");

                    this._timestamp;
                },

                postEvent: function (event) {
                    this.agent
                        .eventRequest(event)
                        .then($.proxy(this.onResponse, this));
                },

                postMessage: function (text) {
                    this.agent
                        .textRequest(text)
                        .then($.proxy(this.onResponse, this));
                },

                onResponse: function (response) {
                    this._timestamp = response.timestamp;

                    if (response.result && response.result.fulfillment) {
                        var fulfillment = response.result.fulfillment;
                        var data = fulfillment.data;

                        this.renderMessages(fulfillment.messages);

                        if (data && data.null) {
                            this.renderAttachments(data.null);

                            this.renderSuggestedActions(data.null.suggestedActions);
                        }
                    }
                },

                renderMessages: function (messages) {
                    var that = this;

                    $(messages).each(function (index, message) {
                        switch (message.type) {
                            case 0:
                                that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);
                                break;
                            case 2:
                                that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));
                                break;
                            default:
                        }
                    });

                },

                renderAttachments: function (data) {
                    var that = this;
                    data.attachments = $(data.attachments).map(function (index, attachment) {
                        return {
                            contentType: attachment.type || "heroCard",
                            content: attachment
                        };
                    }).toArray();

                    this.chat.renderAttachments(data, this.userInfo);
                },

                renderSuggestedActions: function (suggestedActions) {
                    this.chat.renderSuggestedActions($(suggestedActions).toArray());
                }
            });
        </script>

        <script>
            var QUOTE_CARD_TEMPLATE = kendo.template(
                '<div class="#=styles.card# #=styles.cardRich#">' +
                    '<div class="#=styles.cardBody#">' +
                        '<div><strong>Type:</strong>' +
                        '<span>#:coverage#</span></div>' +

                        '<div><strong>Car model:</strong>' +
                        '<span>#:make#</span></div>' +

                        '<div><strong>Car cost:</strong>' +
                        '<span>#:worth.amount#</span></div>' +

                        '<div><strong>Start date:</strong>' +
                        '<span>#:startDate#</span></div>' +

                        '<hr/><div><strong>Total:</strong>' +
                        '<span>#:premium#</span></div>' +
                    '</div>' +
                '</div>'
            );

            kendo.chat.registerTemplate("quote", QUOTE_CARD_TEMPLATE);

            var PLAN_CARD_TEMPLATE = kendo.template(
                '<div class="#=styles.card# #=styles.cardRich#">' +
                    '<div class="#=styles.cardBody# quoteCard">' +

                    '# for (var i = 0; i < rows.length; i++) { #' +
                    '<div>#:rows[i].text#</div>' +
                    '# } #' +

                    '<hr/><div><strong>Total:</strong>' +
                    '<span>#:premium#</span></div>' +


                    '</div>' +
                '</div>'
            );

            kendo.chat.registerTemplate("payment_plan", PLAN_CARD_TEMPLATE);
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?